JQUERY-在li上显示div单击else hide

Question

我在下面找到了小提琴，我想做的是使“ #overlay” div在我单击“ .album” li以外的其他位置时隐藏。 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

如果你想隐藏#overlay时.album2被点击时，使用

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

在这里检查更新的小提琴

Answer 3

只需使用none display而不是hidden visibility 。 尽管您使用的是哪种方法肯定可以工作，但是只会使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

我会建议您这种方法：

$('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 ..替代方法是使用display none|block并且如果隐藏了内容，则不会扩展内容。

Answer 5

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

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