如何在使用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>