SlideToggle多个单独的div

Question

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

.targetDiv {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

我得到了这段代码，但它不能按我的意愿行事。当我点击，例如，在div2上，而div2仍然打开，我需要关闭它，而不是再次打开它。

你知道吗？

Answer 1

在执行任何操作之前，您需要检查target可见性，如下所示：

jQuery(function(){
        jQuery('.showSingle').click(function(){
              
              var targetElem = jQuery('#div'+$(this).attr('target'));
              if(targetElem.is(":visible"))
                  targetElem.hide();
              else
              {
                  jQuery('.targetDiv').slideUp();
                  jQuery('.targetDiv').hide();
                  targetElem.slideToggle();
              }
        });
});

.targetDiv {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

Answer 2

目标元素的Chek先存在与否，然后隐藏并显示：

＆＃13;

＆＃13;

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').slideUp();
              //jQuery('.targetDiv').hide();
              if ( jQuery('#div'+$(this).attr('target') ).is(':visible') )
                 jQuery('#div'+$(this).attr('target')).slideUp();
              else
                 jQuery('#div'+$(this).attr('target')).slideDown();
        });
});

＆＃13;

.targetDiv {display: none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用siblings隐藏已显示的div，只隐藏slideToggle()目标

＆＃13;

＆＃13;

jQuery(function(){
        jQuery('.showSingle').click(function(){
              var getTarget = $(this).attr('target');
              $('#div'+getTarget).siblings('.targetDiv').slideUp();
              $('#div'+getTarget).slideToggle();
        });
});

＆＃13;

.targetDiv {display: none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用 not() 功能排除.targetDiv选项中包含ID的div，也可以使用：not（）伪选择器。

jQuery(function(){
    jQuery('.showSingle').click(function(){
        var targetId = $(this).attr('target');
        jQuery('.targetDiv').not( jQuery('#div' + targetId) ).slideUp();
        jQuery( '#div'+ targetId ).slideToggle();
    });
});

.targetDiv {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>