JQUERY-在李上显示div 单击其他隐藏

Question

我在下面找到了小提琴，我想做的是让"#overlay"div在我单击其他地方而不是".album"li时隐藏。 李".album"在单击时应该显示"#overlay"div，但是当我单击".album2"时，它应该消失了。

在这里摆弄

JAVASCRIPT

$(".album").click(function() {
$("#overlay").css("visibility", "visible");

.CSS

#overlay { visibility: hidden; }

.HTML

<ul>
<li class="album" id="nirvana-nevermind">
hello
<div id="overlay">
<a href="http://www.nirvana.com">Nirvana</a> Nevermind
</div>
</li>
<li class="album2" id="eminem">
hello
</li>

Answer 1

你可以添加这个：

$('#eminem').click(function(){
$("#nirvana-nevermind").css("display","none");
}

Answer 2

如果要在单击.album2时隐藏#overlay，请使用

$(".album2").click(function() {
$("#overlay").css("visibility", "hidden");
});

在此处查看更新的小提琴

Answer 3

只需使用displaynone而不是visibilityhidden。虽然你使用哪种方法肯定会起作用，但只会使div不可见，它将继续占用它的空间。

$(".album").click(function() {
$("#overlay").css("display", "none");
//or you can use hide() method like below:
//$("#overlay").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="album" id="nirvana-nevermind">
hello
<div id="overlay">
<a href="http://www.nirvana.com">Nirvana</a> Nevermind
</div>
</li>
<li class="album2" id="eminem">
hello
</li>

Answer 4

$(document).ready(function(){
$(".album").click(function() {
if($("#overlay").hasClass("hiden"))
$("#overlay").removeClass("hiden").addClass("show");
});
$(".album2").click(function() {
if($("#overlay").hasClass("show"))
$("#overlay").removeClass("show").addClass("hiden");
});
});

.show { visibility: visible; }
.hiden { visibility: hidden; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="album" id="nirvana-nevermind">
hello
<div id="overlay" class="hiden">
<a href="http://www.nirvana.com">Nirvana</a> Nevermind
</div>
</li>

<li class="album2" id="eminem">
hello

</li>

</ul>

Answer 5

我会推荐你这个方法：

$('ul>li').on('click', function(){
$('ul>li').not(this).find('#overlay').css('visibility','hidden');
if ($(this).find('#overlay').length) {
$(this).find('#overlay').css('visibility','visible');
}
});

它等待单击li元素，然后hidding所有#overlay(未单击一个(并检查this li是否包含其中的覆盖，然后将visibility设置为visible(如果已经可见，则没有任何变化(，这将适用于更多li元素和其中的更多叠加层。

$('ul>li').on('click', function(){
$('ul>li').not(this).find('#overlay').css('visibility','hidden');
if ($(this).find('#overlay').length) {
$(this).find('#overlay').css('visibility','visible');
}
});

#overlay { visibility: hidden; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="album" id="nirvana-nevermind">
hello
<div id="overlay">
<a href="http://www.nirvana.com">Nirvana</a> Nevermind
</div>
</li>
<li class="album2" id="eminem">hello</li>
<li class="album2" id="">hello2</li>
<li class="album2" id="">hello3</li>
<li class="album2" id="">
hello with overlay
<div id="overlay">
New overlay here
</div>
</li>
</ul>

而且，您应该知道visibility将永远存在，即使它设置为hidden..另一种方法是使用displaynone|block，如果内容被隐藏，它不会扩展内容。

Answer 6

您可以使用 ：not 选择器在单击元素中添加例外，您可以在此元素中找到更多信息