Переключение активных элементов
Добрый день.
Есть структура:
<div class="all">
<div class="frst">
<div class="head"><h6>Click</h6></div>
<div class="bood">info</div>
</div>
<div class="scnd">
<div class="head"><h6>Click</h6></div>
<div class="bood">info</div>
</div>
</div>
Т.е. разные блоки, у которых при клике на h6 происходит toggleClass('closed'), я хочу сделать так что бы при клике на .frst h6 добавлялся класс к .frst .dood, а при клике на .scnd h6 предыдущее событие обнулялось и класс теперь добавлялся к .scnd .bood и так далее по списку. Просто сделать появление блока именно по клику на селектор в одном родителе получилось:
$('h6').on( "click", function() {
$('h6').parent().parent().find('.bood').toggleClass('closed');
});
Подскажите пожалуйста, как сделать что бы при клике на другой селектор, предыдущее событие обнулялось? Делал похожее со списком пунктов:
$('li').on('click', function() {
change_active($(this));
return false;
});
function change_active(current) {
$('.full_cart .mails li').removeClass("active");
current.addClass("active");
$('.full_cart .mails .send').attr('href', ($('.full_cart .mails li.active').attr('title')));
}
Но не могу додуматься как правильно интерпретировать для этого случая. Спасибо. |
emptyindorill,
https://javascript.ru/forum/misc/639...tml#post421800 и таких примеров более 300, искать открывашка |
Спасибо, но это немного не то. У меня не аккордион, уж про такое (UI) я знаю. У меня другая структура кода, и предлагаемый вариант мне не подходит.
<div class="obertka">
<div class="small_cart">
some code
<h6>Контакты</h6>
</div>
<div class="full_cart closed">
some code
</div>
</div>
<div class="some_parent_lvl1">
<div class="obertka">
<div class="small_cart">
some code
<h6>Контакты</h6>
</div>
<div class="full_cart closed">
some code
</div>
</div>
<div class="some_parent">
<div class="obertka">
<div class="small_cart">
some code
<h6>Контакты</h6>
</div>
<div class="full_cart closed">
some code
</div>
</div>
</div>
</div>
И элементы разнятся довольно таки сильно. Единственное что едино - какая то оболочка двух активных блоков. |
<style>
.closed { display:none; }
</style>
<div class="obertka">
<div class="small_cart">
some code
<h6>Контакты</h6>
</div>
<div class="full_cart closed">
more some code
</div>
</div>
<div class="some_parent_lvl1">
<div class="obertka">
<div class="small_cart">
some code
<h6>Контакты</h6>
</div>
<div class="full_cart closed">
more some code
</div>
</div>
<div class="some_parent">
<div class="obertka">
<div class="small_cart">
some code
<h6>Контакты</h6>
</div>
<div class="full_cart closed">
more some code
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$('h6').on( "click", function() {
$('h6').parent().parent().find('.full_cart').addClass('closed');
$(this).parent().parent().find('.full_cart').removeClass('closed');
})
</script>
|
Цитата:
Я так пробовал - у меня не получилось так. Эти два события одновременно выполнялись - в инспекторе просто подсветка кода мигала и класс одновременно удалялся и добавлялся. Наверное это от версии js зависит? |
Цитата:
А покажите ваш вариант? |
Цитата:
Вот |
|
Как говорится, найдите одно отличие.
Ваш вариант
$('.opening').on( "click", function() {
$(this).parent().parent().find('.full_cart').addClass('closed');
$(this).parent().parent().find('.full_cart').removeClass('closed');
});
Мой вариант
$('h6').on( "click", function() {
$('h6').parent().parent().find('.full_cart').addClass('closed');
$(this).parent().parent().find('.full_cart').removeClass('closed');
})
|
Да, всё работает.
Спасибо большое за подсказку. |
| Часовой пояс GMT +3, время: 17:46. |