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

Question

I have found the fiddle below and what I am trying to do is to make '#overlay' div to hide when I click somewhere else than on '.album' li. Li '.album' should show '#overlay' div when clicked but when I click on '.album2' it should dissapear.

fiddle here

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

You could add this:

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

Answer 2

If you want to hide #overlay when .album2 is clicked, use

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

Check the Updated Fiddle Here

Answer 3

Just use display none instead of visibility hidden . Although which method you are using will work definitely, but just will make the div invisible and it will keep occupying it's space.

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

I'll suggest you this method:

$('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');
     }
});

It waits to click on li element then hidding all #overlay (not clicked one) and checks if this li contains overlay inside of it, then set visibility to visible (nothing changes if already visible), this will work with more li elements and more overlays within them.

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

And also, you should know that visibility will always be there, even if its setted to hidden .. The alternative is to use display none|block and it will not expand the content if it's hidden.

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选择器在单击元素中添加例外，您可以在此找到更多信息