如何在使用jQuery打开后隐藏相同的内容？

Question

我想在点击后隐藏当前元素。现在，如果你点击它，它会重新打开，我不想嵌套项目，因为我需要这些是他们自己的独立链接。这里是我的代码：

这是我的小提琴：http://jsfiddle.net/neo9a0xc/

<style>.targetDiv {display: none}</style> 

<a class="showSingle" target="1">Div 1</a> 
<a class="showSingle" target="2">Div 2</a> 
<a class="showSingle" target="3">Div 3</a> 
<a class="showSingle" target="4">Div 4</a> 


<div id="div1" class="targetDiv">Lorum Ipsum1</div> 
<div id="div2" class="targetDiv">Lorum Ipsum2</div> 
<div id="div3" class="targetDiv">Lorum Ipsum3</div> 
<div id="div4" class="targetDiv">Lorum Ipsum4</div> 

<script> 
jQuery(function(){ 
     jQuery('.showSingle').click(function(){ 
       jQuery('.targetDiv').slideUp(); 
       jQuery('.targetDiv').hide(); 
       jQuery('#div'+$(this).attr('target')).slideToggle(); 
     }); 
}); 
</script> 

Answer 1

你并不需要同时从何时起效果基本show完成这台显示器没有反正slideUp和hide。你需要做的是获取你点击的元素的索引，然后隐藏不同索引的targetDiv div。

jQuery(function() { 
 
    jQuery('.showSingle').click(function() { 
 
    $(this).addClass('selected').siblings().removeClass('selected'); 
 
    var idx = jQuery(this).index('.showSingle') 
 
    jQuery('.targetDiv:not(:eq(' + idx + '))').hide(); 
 
    jQuery('#div' + $(this).attr('target')).slideToggle(function() { 
 
     if (jQuery('.targetDiv:visible').length == 0) jQuery('.showSingle').removeClass('selected'); 
 
    }); 
 
    }); 
 
});

.targetDiv { 
 
    display: none 
 
} 
 
.selected { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
<a class="showSingle" target="1">Div 1</a> 
 
<a class="showSingle" target="2">Div 2</a> 
 
<a class="showSingle" target="3">Div 3</a> 
 
<a class="showSingle" target="4">Div 4</a> 
 

 

 
<div id="div1" class="targetDiv">Lorum Ipsum1</div> 
 
<div id="div2" class="targetDiv">Lorum Ipsum2</div> 
 
<div id="div3" class="targetDiv">Lorum Ipsum3</div> 
 
<div id="div4" class="targetDiv">Lorum Ipsum4</div>