jQuery隐藏元素在使用CSS显示时保持隐藏状态

jQuery hidden element stays hidden when showing with CSS

本文关键字：隐藏 状态 显示 元素 jQuery CSS      更新时间：2023-09-26

我有一个具有display:none属性的元素。现在，如果用户悬停在父对象上，它将显示：

.item:hover .description {
    display: block; 
    z-index: 1;
}

现在，当我执行时

$(".description").hide()

要再次隐藏元素（用户可以单击元素中的X关闭它），如果用户再次将鼠标悬停在父元素上，则该元素将不会再次显示。它一直隐藏着。

如何避免css的显示和隐藏函数出错？

您给出代码的方式是将CSS和JavaScript混合在一起。jQuery使用内联样式来完成.hide()或show。inline-styles比CSS更具体。要么使用classes并切换它们，要么只使用JavaScript。

我会这样做：

.item:hover .description {
  display: block; 
  z-index: 1;
}
.item .description {
  display: none;
}

上面是一个纯CSS方法。但是使用JavaScript时，我会考虑使用toggleClass()而不是.hide()或.show()。

.item:hover .description {
  display: block; 
  z-index: 1;
}
.item .description.hidden {
  display: none;
}

在JS中：

$(".description").addClass("hidden");

当你想显示它时，你可以随时使用：

$(".description").removeClass("hidden");

对于切换内容，您可以使用：

$(".description").toggleClass("hidden");

hide将添加一个内联样式来隐藏元素，在这种情况下，它将覆盖CSS样式。

如果您使用JavaScript来隐藏元素，则需要在不再相关时使用JavaScript来删除该内联样式。我会在.item上使用mouseleave事件处理程序，并使用一个类来隐藏description:

CSS：

.item:hover .description.hide {
    display: none;
}

点击X:时隐藏描述

$(".item .description").addClass("hide");

当用户不再悬停在.item:时删除

$(".item").on("mouseleave", function() {
    $(this).find(".description.hide").removeClass("hide");
});

可以使用如上所述的直接处理程序，也可以使用事件委派（我在下面的示例中使用委派）。

实时示例：

// Hide when X clicked
$(document.body).on("click", ".item .description .close", function() {
  $(this).closest(".description").addClass("hide");
});
// Reset when user no longer hovering
$(document.body).on("mouseleave", ".item", function() {
  $(this).find(".description.hide").removeClass("hide");
});
.item .description {
  display: none;
}
.item:hover .description {
  display: block; 
  z-index: 1;
}
.item:hover .description.hide {
  display: none;
}
/* The following are just for the demo */
.close {
  cursor: pointer;
}
.item {
  position: relative;
  height: 2em;
  border: 1px solid black;
}
.item .description {
  position: absolute;
  background-color: #eee;
  left: 10em;
  top: 2px;
  border: 1px solid #ddd;
}
<div class="item">
  I'm item 1
  <div class="description">
    I'm description 1
    <span class="close">[x]</span>
  </div>
</div>
<div class="item">
  I'm item 2
  <div class="description">
    I'm description 2
    <span class="close">[x]</span>
  </div>
</div>
<div class="item">
  I'm item 3
  <div class="description">
    I'm description 3
    <span class="close">[x]</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这是因为在JS隐藏此元素时，您将visibility:hidden设置为它。在下一次关注父元素后，您将不会设置visibility：visible，这是必需的。

例如，您可以执行

$(".description").show()

在下一次关注父元素之后

相关文章：