Создание моего собственного стиля аккордеон с помощью jquery

Question

У меня есть переменная в JS, которая содержит действие щелчка. Это действие связано с несколькими различными div:

<div class="clickable"><div class="hidden">inner content 1</div></div>

<div class="clickable"><div class="hidden">inner content 2</div></div>

<div class="clickable"><div class="hidden">inner content 3</div></div>

JS выглядит так:

$(document).ready(function(){

var clicker = function(){

    $('.hidden').slideUp();

    $(this).children('.hidden').slideDown();

    $(this).unbind('click',clicker);
}


$('.clickable').bind('click',clicker);


});

Приведенный выше код в основном работает. Если я нажимаю div.clickable, он показывает скрытый контент. Если я нажимаю на другой div.clickable, он скрывает контент, на который я только что смотрел, и открывает другой. Проблема, однако, в том, что из-за этой функции отмены привязки внутри "кликера" все, что я нажимаю, теряет свою функцию кликера. Я сделал это, потому что в скрытом контенте есть кликабельный материал, и все, что я сейчас нажимаю внутри скрытого контента, снова вызывает "кликер".

Какой более разумный подход к этому без использования плагинов для аккордеона?

Как я могу проверить, был ли div связан с функцией, и если нет, перепривязать его или что-то в этом роде? Все, что я ищу, это привязать div.clickable к "clicker", как только он будет закрыт, то есть просматривается еще один div.clickable.hidden.

Answer 1

Вы можете просто исключить тот, который вы нажимаете в .slideUp(), как это:

$(document).ready(function(){
  $('.clickable').click(function(){
    $('.hidden').not($(this).children()).slideUp();
    $(this).children('.hidden:hidden').slideDown();
  });
});

Используя .not() мы исключаем текущий элемент в .hidden те, чтобы скрыть, и при показе детей, ограничивая его только :hidden элементы означают, что мы не будем повторно сдвигать то, что уже видно.

Еще один способ переписать это немного проще:

$(function(){
  $('.clickable').click(function(){
    $('.clickable').not(this).children('.hidden').slideUp();
    $(this).children('.hidden:hidden').slideDown();
  });
});

Или, если они все .clickable элементы братья и сестры:

$(function(){
  $('.clickable').click(function(){
    $(this).children('.hidden:hidden').slideDown()
     .end().siblings('.clickable').children('.hidden').slideUp();
  });
});

Answer 2

$(document).ready(function(){

var clicker = function(){

    $('.clickable').bind('click',clicker);

    $('.hidden').slideUp();

    $(this).children('.hidden').slideDown();

    $(this).unbind('click',clicker);
}


$('.clickable').bind('click',clicker);


});