Question

这个有效：

http://jsfiddle.net/fGnL7/3/

使用

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").slideDown("slow");
  } else {
    $("div").slideUp("slow");
  }
});

但是如果由于某种原因，该元素由某个框架（由Compass / Blueprint的display: block制作）+clearfix，那么我用了

display: none !important

首先让它不显示在页面上，然后代码将无效。

示例：http://jsfiddle.net/fGnL7/4/

我还尝试在调用$("div").css({display: 'block'});之前添加$("div").css({display: 'block !important'});甚至slideDown()，但它也不起作用。

示例：http://jsfiddle.net/fGnL7/7/

有解决方法吗？

Answer 1

我会在您正在下滑的overflow: auto;元素的父元素上使用<div>，而不是您当前使用的clearfix解决方案。这不是一个脚本问题......而是一个风格问题。

顺便说一下，你的演示不是使用jsfiddle的合适方式，并且可能会引入一些错误......左上角的内容在呈现时已经在<body>标记内。 Instead your examples should look like this（另请注意使用.slideToggle()）。

Answer 2

!important为CSS规则提供无限特异性，您将无法覆盖它。

我建议不要在主页上绑定你的幻灯片行为，以达到你想要的效果。这也将使渐进增强众神高兴。

Answer 3

因为!important规则优先于所有内容！那个，以及当使用slide函数时，jQuery会自动为元素提供非!important样式display: block，消灭你的display: block !important并导致定义的样式在style标记中优先使用。

简单的解决方法是不使用!important。最难的是入侵jQuery源并在!important中添加到已滑动元素的样式中。

Answer 4

尝试修改高度：0首先删除属性样式并定期执行slideDown / slideUp。应该工作！

ie：selector.css（'height'，'0'）。attr（'style'，''）。slideUp（'slow'）

jQuery如果$（'＃foo'）。是（'：hidden'）和$（'＃foo'）。slideUp（）在“display：none！important”时无效？

4 个答案: