Question

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

<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>

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

1 个答案: