display：none和jquery show / slideDown

baao 发表于 Dev

display:none在CSS中使用时：

#example {
display:none;
}

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

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

   });

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

有人可以解释为什么吗？

Praveen Kumar Purushothaman

这背后的原因是display: none;在第一种情况下CSS类将指定，但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替代

$(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。