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不需要添加我的隐藏类）添加remove类也会导致延迟和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>

问候，卢波

使用slideDown显示div

2 个答案: