Jquery скрывать / показывать блоки при клике на самих себя

220
13 января 2018, 00:37

Всем привет

В коде реализовано скрыть / открыть при нажатии на другие блоки Сейчас нужно также добавить функцию, чтобы при нажатии на открытый блок он скрывался. Тоесть при повтороном нажатии на открытый блок он прятался Не могу понять как это сделать, кто что подскажет ?

jQuery(function(){ 
        jQuery('.showSingle').click(function(){ 
              jQuery('.targetDiv').hide(); 
              jQuery('#div'+$(this).attr('target')).show(); 
        }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<div class="buttons"> 
<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> 
 
<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div> 
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div> 
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div> 
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

Answer 1

Ну, как-то так:

jQuery(function(){ 
        jQuery('.showSingle').click(function(){ 
              jQuery('#div'+$(this).attr('target')).toggle(); 
              jQuery('.targetDiv').not('#div'+$(this).attr('target')).hide(); 
        }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<div class="buttons"> 
<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> 
 
<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div> 
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div> 
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div> 
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

Answer 2

Добавьте этот обработчик клика и к .targetDiv. В самом обработчике определите, что именно было нажато, ссылка или див. Определите переменную - блок который надо скрыть/показать. После чего используйте toggle() чтобы скрыть или показать его, а все соседние дивы скройте.

атрибут target заменил на data-target. В целом туда проще сразу вписать id блока, а не его номер.

зы: повторный клик по ссылке скрывает блок, не знаю нужно ли вам такое поведение

$('.showSingle, .targetDiv').click(function(){ 
 
    var $td = $(this);  // по умолчанию считаем что кликнули в блок 
 
    // но если это была ссылка, то ищем блок 
    if($(this).hasClass('showSingle')){ 
        var target =  $(this).data('target'); 
        $td = $("#div" + target); 
    } 
 
    $td.toggle() 
       .siblings().hide();     
});
.targetDiv {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="buttons"> 
  <a  class="showSingle" data-target="1">Div 1</a> 
  <a  class="showSingle" data-target="2">Div 2</a> 
  <a  class="showSingle" data-target="3">Div 3</a> 
  <a  class="showSingle" data-target="4">Div 4</a> 
</div> 
 
<div class="targets"> 
  <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> 
</div>

Поскольку вероятно я не так понял ваш вопрос, и имеется виду скрытие по повторному нажатию на ссылку, то конечно все гораздо проще

$('.showSingle').click(function(){ 
    var target =  $(this).data('target');     
    $("#div" + target).toggle() 
                      .siblings().hide();     
});
.targetDiv {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="buttons"> 
  <a  class="showSingle" data-target="1">Div 1</a> 
  <a  class="showSingle" data-target="2">Div 2</a> 
  <a  class="showSingle" data-target="3">Div 3</a> 
  <a  class="showSingle" data-target="4">Div 4</a> 
</div> 
 
<div class="targets"> 
  <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> 
</div>

READ ALSO
Tooltip на JavaScript [требует правки]

Tooltip на JavaScript [требует правки]

tomilinosamoletru/building/15 подскажите пожалуйста, может кто видел такое раньше, на сайте внизу есть "шахматная доска", при hover на синие квадраты вылазит...

195
Коррекция выпадающего меню

Коррекция выпадающего меню

Привет! Пытаюсь выстроить меню с выпадающими блоками и у меня возникли небольшие затруднения

191
Неразбериха с кодировкой

Неразбериха с кодировкой

В phpmyadmin отображается некорректно когда добавляю запись на русском через сервер

191
Часы html + js время Амстердам [дубликат]

Часы html + js время Амстердам [дубликат]

На данный вопрос уже ответили:

210