jquery - 如何用jQuery打开后隐藏相同的内容？

Question

我想在单击当前元素后隐藏它。现在，如果您单击它，它将重新打开，我不想嵌套这些项目，因为我需要它们成为它们自己的独立链接。这是我的代码:

这是我的 fiddle :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

您不需要同时使用 slideUp 和 hide，因为当 SlideUp 完成时，它会将显示设置为无。您需要做的是获取您点击的元素的索引，然后隐藏索引不同的 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>