jQuery的隐藏和显示方法无法正常工作

Question

我想要实现的是，当我点击了三个选项卡之一，它应该在可点击的div描述DIV褪色，以及隐藏在其他如果我使用.show()和.hide()没有参数（例如.hide（“慢”）），它完美的作品，如果我点击活动的描述div，什么都不是发生（如预期）。如果我使用.hide（“slow”）和.show（“slow”），或者使用毫秒参数（1000）代替“slow”，它会淡入淡出，就像它应该一样，但如果我点击一个活跃的描述div，它会淡出并再次淡出，我不希望它发生。下面的JS提琴可供参考。

https://jsfiddle.net/k00s1fek/

Answer 1

只需添加一个简单的检查，看看目前的选择有display : none一个div。 以下是需要的代码JavaScript。

$('.col-lg-2').click(function() { 

    if ($(this).children('.desc').css("display") == "none") { 
    $('.desc').not(this).hide("slow"); 
    $('.desc', this).show("slow"); 
    } 

}) 

Answer 2

这工作得很好，希望它有助于：

$('.col-lg-2').click(function(){ 
    var current = $(this).find(".desc") 
    $(current).show("slow"); 
    $(".desc").not(current).hide("slow"); 
}) 

Answer 3

$('.col-lg-2').click(function(){ 
 
    $('.desc').not($(this).find('.desc')).hide(); 
 
    $(this).find('.desc').show("slow"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="row"> 
 
    
 
     <div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content=" Një filxhan çaji cool nga Electronic Beats. 
 
" data-original-title=" Filxhan caji 
 
" data-trigger="focus" tabindex="0" role="button" data-placement="top"> 
 
      <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/XQeCxxh.png"> 
 
      </div><div style="position: absolute; background-color: rgb(226, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px;" class="desc">first tab 
 
     </div> 
 

 

 
</div> 
 
<div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content="Some content inside the popover" data-original-title=""> 
 
      <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/QJOzklY.png"> 
 
      </div><div style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; line-height: 18px; display: none;" class="desc">second tab 
 
</div> 
 

 
</div> 
 
<div class="col-xs-4 col-lg-2"> 
 
      <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/6gAPzHW.png"> 
 
      </div><div class="desc" style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; display: none;"> 
 
third tab 
 
</div> 
 

 

 
</div> 
 
</div>

首先隐藏.desc格，然后显示当前的div递减

$('.col-lg-2').click(function(){ 
    $('.desc').not($(this).find('.desc')).hide(); 
    $(this).find('.desc').show("slow"); 
}) 

Answer 4

你可以像下面这样做

$('.col-lg-2').click(function(){ 
 
\t 
 
    if(!$(this).hasClass('active')){ 
 
\t $('.col-lg-2').not(this).removeClass('active').find('.desc').hide('slow'); 
 
\t \t $(this).addClass('active').find('.desc').show('slow'); 
 

 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    
 
     <div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content=" Një filxhan çaji cool nga Electronic Beats. 
 
" data-original-title=" Filxhan caji 
 
" data-trigger="focus" tabindex="0" role="button" data-placement="top"> 
 
\t \t \t \t \t <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/XQeCxxh.png"> 
 
\t \t \t \t \t </div><div style="position: absolute; background-color: rgb(226, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px;" class="desc"> 
 
a stupid bag 
 
</div> 
 

 

 
\t \t \t \t </div> 
 
<div class="col-xs-4 col-lg-2" data-toggle="popover" title="" data-content="Some content inside the popover" data-original-title=""> 
 
\t \t \t \t \t <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/QJOzklY.png"> 
 
\t \t \t \t \t </div><div style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; line-height: 18px; display: none;" class="desc">laka laka lagu iku miku dhe taku ke shpia lakut noren 2 e gjys tdarkes 
 
</div> 
 

 
\t \t \t \t </div> 
 
<div class="col-xs-4 col-lg-2"> 
 
\t \t \t \t \t <div style="background-color:#d0d0d0;"><img src="https://i.imgur.com/6gAPzHW.png"> 
 
\t \t \t \t \t </div><div class="desc" style="position: absolute; background-color: rgb(216, 0, 116); color: white; top: 0px; text-align: center; margin: 0px; right: 10px; left: 10px; display: none;"> 
 
a stupid bag 
 
</div></div>