4

チェックボックスで表示および非表示にしたいdivがあります：

      <li>             
        <label for="">Fixed-term package:</label>               
        <ul>                  
          <li><input id="" type="checkbox" name="package-fixed-term" /></li>               
        </ul>                       
      </li>
      <div id="package-fixed-term-options" class="hidden">

私のクラス「非表示」：

.hidden {display: none !important;}

入力コントロールを確認すると、下にスライドしません。行に .removeClass('hidden') を追加することで機能させることができますが、これは必須ではありません (たとえば、slideUp は隠しクラスを追加し直す必要はありません) remove クラスを追加すると、遅延と slideDown も強制終了されますアニメーション。スライドアップは美しく機能します。関数は次のとおりです。

$('input[name="package-fixed-term"]').change(function(){
if ($('input[name="package-fixed-term"]:checked').val() !== undefined) {     
  $('div#package-fixed-term-options').delay(300).slideDown(500);
  return false;
  } else {
  $('div#package-fixed-term-options').delay(300).slideUp(500);
  return false;
  }
});
4

2 に答える 2

4

それ!importantがこの問題の原因です。

このフィドルを参照してください: http://jsfiddle.net/4JYeq/2/

css から削除すると、機能します。

.hidden {display: none;}​
于 2012-08-03T14:36:56.367 に答える
0

これを実現する最も簡単な方法は、「トグル」を使用することです

<input type="checkbox" onchange="$('#myDiv').toggle();" />
<div id="myDiv" style="display: block">
Here goes the DIV
</div>

よろしく、ルポ

于 2012-08-03T14:37:39.943 に答える