Question

我找到了下面的小提琴，我想要做的是当我点击其他地方而不是'.album'li时，让'#overlay'div隐藏起来。 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");
});

检查Updated Fiddle Here

Answer 3

只需使用display none代替visibility hidden。虽然你使用的是哪种方法肯定会起作用，但只是让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是否包含覆盖内，然后设置{{1 }} 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如果内容被隐藏，则不展开内容。

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 selector在this

上找到的点击元素中添加例外情况

在jquERY- show div on li点击其他隐藏

6 个答案: