display：none和jquery show / slideDown

Question

在css中使用display:none：

#example {
display:none;
}

我的内容并未通过此jQuery函数显示：

 $('#div1').on('mouseover', function() {
   $('#example').slideDown(2000);

   });

但是当我使用内联样式参数style="display:none"时，它可以工作。

有人可以解释原因吗？

Answer 1

背后的原因是CSS类将在第一种情况下指定display: none;，但jQuery 认为元素是可见的。要处理此问题，最好的方法是定义一个等级为.hidden的类display: none;，然后将该类分配给#example。

.hidden {display: none;}

然后，从元素中删除类hidden，并在文档就绪时使用jQuery将其隐藏。

$(document).ready(function () {
    $(".hidden").hide().removeClass("hidden");
});

在此之后，无论你使用jQuery做什么，都像魅力一样。

---

没有CSS类

$(document).ready(function () {
  $("#trigger").click(function () {
    $("#theDiv").toggle();
    return false;
  });
});

#theDiv {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" id="trigger">Show / Hide</a>
<div id="theDiv">
  <p>Hello</p>
</div>

使用CSS hidden / jQuery Alternative

$(document).ready(function () {
  $(".hidden").hide().removeClass("hidden");
  $("#trigger").click(function () {
    $("#theDiv").toggle();
    return false;
  });
});

.hidden {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" id="trigger">Show / Hide</a>
<div id="theDiv" class="hidden">
  <p>Hello</p>
</div>

Answer 2

请参阅this article about specificity。那就是这里的错误。我不太清楚你的页面的确切结构/布局是什么，但这清楚地表明你的CSS选择器的特性比你的内联样式更低，所以你的内联样式会覆盖CSS样式。

要解决这个问题，你可以看看是否还有另一个选择器也为这个元素定义了display样式，或者是否有另一个内联样式影响了这个（可能主要由JS引起）。如果其他方法无效，仅如果没有其他方法可行，则可以使用display: none !important;作为CSS中的样式。但是，就像我说的那样，只有如果没有其他工作。

Answer 3

jQuery函数.show（）将为您提供所需的内容：

 $('#div1').on('mouseover', function() {
     $('#example').slideDown(2000);
     $('#example').show();
 });