Jquery SlideToggle .click проблема

Question

Я использую следующее:

$(function() {
    $(".StaffSubjectClassNav ul").hide();
        $('.StaffSubjectClassNav h3').click(function(){
        $(this).toggleClass('clicked');
        $(this).next('ul').slideToggle('100');
    });
});

В следующем HTML:

<h3><a href="link">Link</a></h3>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>

Он отлично работает, скрывает <UL> и показывает его, когда я нажимаю <H3>.

Однако <a> также является ссылкой, как я могу установить скрипт так, чтобы, если они нажимают <a> внутри <H3>, он не скользит?

Answer 1

Оберните h3 в a, добавьте действие к ссылке и верните false. Например:

JS:

$(function() {
    $(".StaffSubjectClassNav ul").hide();
    $('#h3_link').click(function(){
        $(this).toggleClass('clicked');
        $(this).next('ul').slideToggle('100');
        return false;
    });
});

HTML:

<a href="link" id="h3_link"><h3>Link</h3></a>
<ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
</ul>

Возможно, вам просто придется немного изменить свой CSS. Но это правильный способ сделать это. Ссылки предназначены для нажатия, а не для тегов H3.