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">

我的类(class)“隐藏”:

.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 导致了此问题。

看到这个 fiddle :http://jsfiddle.net/4JYeq/2/

从CSS中删除它，它就会工作:

.hidden {display: none;}​