jquery - 用 slideDown 显示一个 div

Question

我有一个 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 不需要添加回我的隐藏类）添加删除类也可以消除延迟和 slideDown动画片。slideUp 效果很好。这是功能：

$('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;
  }
});

Answer 1

这!important是导致此问题的原因。

看到这个小提琴：http: //jsfiddle.net/4JYeq/2/

从 css 中删除它，它将起作用：

.hidden {display: none;}​

Answer 2

完成此操作的最简单方法是使用“切换”

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

问候，卢波