Попытка заставить слайд оставаться открытым при нажатии на ссылки.

Question

У меня есть этот бит JQuery, чтобы скрыть и показать LI под UL, когда он нажал, и это работает. Однако, когда я нажимаю одну из ссылок под UL, она закрывается, и я хотел бы, чтобы она оставалась открытой.

<script type="text/javascript">
$(function () {
    $('.headlink').click(function() {
        $(this).children('ul').slideToggle();
    });    
    $('.headlink').click(function(event) {
        event.stopPropagation();
    });
});
</script>

Это UL.

<ul class="arclist">
    <li class="headlink">
    <h2>+ Top Link</h2>
        <ul class="transcriptfile" style="display:none;">';
    <a href="transcripts/filename"><li>
    <p>Clickable Link</p></li></a>
        </ul>
</ul>

Если заполнить UL и LI немного PHP-кода, но я взял его для простоты чтения. Как я уже сказал, все работает, я получаю несколько UL и несколько LI, и все интерактивные ссылки работают, но он просто переключает слайд и снова скрывает его после нажатия на одну из интерактивных ссылок, и я этого не хочу.

Answer 1

Вы могли бы использовать .stopPropagation() в раскрывающемся меню, чтобы он не переключался при нажатии.

http://jsfiddle.net/pVQsv/

$(function () {
    $('.headlink').click(function () {
        $('ul', this).slideToggle();
    });
    $('.headlink ul').click(function(e) {
        e.stopPropagation();
    });
});

Answer 2

Вы можете связать обработчик на h2 элемент как это:

$('.headlink h2').click(function() {
    $(this).next('ul').slideToggle();
});

Проверьте это демо

Answer 3

Я пытался с помощью e.stopPropagation(); по-разному, но у меня это не сработало:(

Итак, решение, которое я нашел, было следующим:

$(function () {
    $('.headlink').click(function() {
        $('.headlink ul').slideToggle();
    });

    $("headlink ul a").click(function() {
        $(".headlink ul").stop();
    });
});

Возможно, это не самый обычный способ сделать это, но он тоже работает:)