Ссылка внутри «аккордеона» не работает, как исправить?

Question

[das_pupkin]

Суть в следующем, есть код аккордеона

(function($) {

    $('.accordion a').click(function(j) {
        var dropDown = $(this).closest('li').find('div');

        $(this).closest('.accordion').find('div');

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('.accordion').find('a.active').removeClass('active');
            $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
    });
})(jQuery);

при этом все ссылки внутри аккордеона не работают.
То есть происходит складывание/раскладывание аккордеона и все.
Понимаю, что нужно использовать preventDefault(), но не понимаю где.

Answer 1

[RAX7]

Так у тебя обработчик повешен на все кнопки внутри аккордеона $('.accordion a'), а должен только на кнопки отвечающие за складывание/раскладывание. А еще лучше не делать контролы ссылками, а сделать их кнопками button, тогда и preventDefault() не понадобится.

Answer 2

[das_pupkin]

Но если html аккордеона выглядит так:

<ul class="accordion">
<li><a>HEADER OF ACCORDION MENU 1</a>
<div>CONTENT</div></li>
<li><a>HEADER OF ACCORDION MENU 2</a>
<div>CONTENT</div></li>
</ul>

то к чему еще привязываться?

Comments

[RAX7]

Добавь например классы к котролам <li><a.controll>HEADER OF ACCORDION MENU 1</a>
$('.accordion a.controll')

[das_pupkin]

RAX7, Добавил, однако ссылки внутри <div> все равно не работают. У них другой класс.

[RAX7]

das_pupkin, можешь код в какую-нибудь в песочницу залить, например на https://codepen.io

[das_pupkin]

RAX7, https://codepen.io/das_pupkin/pen/NEoEVM. Там не заданы классы для <a> но с ними аккордеон также работает, как и без них.

[RAX7]

das_pupkin, https://codepen.io/anon/pen/OadrLz

[das_pupkin]

RAX7, спасибо! Очень признателен!