Всем привет
В коде реализовано скрыть / открыть при нажатии на другие блоки Сейчас нужно также добавить функцию, чтобы при нажатии на открытый блок он скрывался. Тоесть при повтороном нажатии на открытый блок он прятался Не могу понять как это сделать, кто что подскажет ?
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>
Ну, как-то так:
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>
Добавьте этот обработчик клика и к .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>
Фрилансер или Digital-агентство - Как сделать правильный выбор?
tomilinosamoletru/building/15 подскажите пожалуйста, может кто видел такое раньше, на сайте внизу есть "шахматная доска", при hover на синие квадраты вылазит...
Привет! Пытаюсь выстроить меню с выпадающими блоками и у меня возникли небольшие затруднения
В phpmyadmin отображается некорректно когда добавляю запись на русском через сервер