显示一个div了slideDown

我有一个div我想说明，并用复选框隐藏：显示一个div了slideDown

 <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; 
    } 
});

来源

2012-08-03 eggs

这是导致此问题的!important。

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

从CSS中删除它，它会工作：

.hidden {display: none;}

来源

2012-08-03 14:36:56 Arcturus

完美。我不会怀疑，由于这个问题，我没有设置这些类，所以我应该更加怀疑。切换是一个很好的建议来简化代码。谢谢。仍然好奇为什么！重要的事情会混淆动画。 – eggs 2012-08-03 14:52:35

除了从样式中删除！重要的以外，如果样式是在线的，它可以在函数中被覆盖： .css（'display'，'block！important'）我发现了一个线索[.show（）] [1] [1]的文档：http://api.jquery.com/show/ – eggs 2012-08-03 16:41:00

做到这一点最简单的方法将使用 “切换”

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

问候，Lupo

来源

2012-08-03 14:37:39 Lupo

显示一个div了slideDown

回答

相关问题