jQuery UIのアコーディオン内にあるフォームにテキストを入力できません

Question

タイトルと同じように、jQuery UIアコーディオンのコンテンツdiv内に単一の入力とボタンを持つフォームがあり、テキストを入力できません私はそれをテストするときにそれに。ボタンをクリックすることもできません。ここで

はHTMLである：ここでは

<button type="button" id="ic-open-report"><i class="fa fa-envelope"></i><p>Export Savings Report</p></buttOn> 
        <div id="ic-savings-report"> 
         <h4>Export a PDF Savings Report</h4> 
          <div> 
          <form method="POST" class="savings-report"> 

             <input style="user-select: text;" type="email" id="ic-email" placeholder="Email"> 
             <button type="submit" >Export</button> 
          </form> 
          </div> 
        </div> 

はjQueryのです：

$('#ic-savings-report').accordion({ 
    collapsible: true, 
    active: false, 
    animate: 400 
}); 
$('#ic-savings-report').hide(); 

$('#ic-open-report').click(function(){ 
    $('#ic-savings-report').toggle(700); 
    setTimeout("$('#ic-savings-report').accordion('option', 'active', 0  );", 1000); 
}); 

私はこれが起こる理由さえわかりません。なぜ入力を編集できないのですか？ここで

は、実際のプロジェクトへのリンクです： http://lcstuff.000webhostapp.com/intellifrost-calculator/

Answer 1

私が来ましたこの問題とjquery全体で、この要素のfont-size: 1emを.ui-widget inputに設定していたため、何らかの理由でこれがテキストを見えなくしました。だから私は入力したときにテキストが表示されないので、テキストを入力できないという印象を与えました。

私はちょうどそれを修正するために、次に設定します。

font-size: 14px; 

Answer 2

は、限り、あなたは適切にjQueryとjQueryのUIを参照するとうまく動作するようです：

$('#ic-savings-report').accordion({ 
 
    collapsible: true, 
 
    active: false, 
 
    animate: 400 
 
}); 
 
$('#ic-savings-report').hide(); 
 

 
$('#ic-open-report').click(function() { 
 
    $('#ic-savings-report').toggle(700); 
 
    setTimeout("$('#ic-savings-report').accordion('option', 'active', 0  );", 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<button type="button" id="ic-open-report"> 
 
    <i class="fa fa-envelope"></i> 
 
    <p>Export Savings Report</p> 
 
</button> 
 
<div id="ic-savings-report"> 
 
    <h4>Export a PDF Savings Report</h4> 
 
    <div> 
 
     <form method="POST" class="savings-report"> 
 
    
 
      <input style="user-select: text;" type="email" id="ic-email" placeholder="Email"> 
 
      <button type="submit">Export</button> 
 
     </form> 
 
    </div> 
 
</div>