SlideToggle несколько отдельных дивы

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 для целевого элемента либо существуют, либо не первым, то не скрывать и показывать:

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(); 
 
     }); 
 
});

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

Используйте siblings, чтобы скрыть уже показал дивы и просто slideToggle() цель

jQuery(function(){ 
 
     jQuery('.showSingle').click(function(){ 
 
       var getTarget = $(this).attr('target'); 
 
       $('#div'+getTarget).siblings('.targetDiv').slideUp(); 
 
       $('#div'+getTarget).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 4

Вы можете использовать not() функцию для исключения DIV с ID в выборе .targetDiv или вы можете использовать : 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>