jQuery - Нажмите на LI, показать / скрыть UL - Нажмите на LI: ссылка, продолжите показывать UL и откройте в пустом окне - PullRequest
Новая
       7

jQuery - Нажмите на LI, показать / скрыть UL - Нажмите на LI: ссылка, продолжите показывать UL и откройте в пустом окне

2 голосов
/ 21 августа 2010

Спасибо замечательным авторам здесь, на SO! JQuery гораздо круче, когда вы начинаете понимать это. :)

Итак, у меня есть LI, который при нажатии показывает / скрывает дочерний UL. Что я хотел бы сделать, так это иметь возможность щелкнуть ссылку внутри LI, которая открывает пустое окно, но также не закрывает дочерний UL. Открыто пустое окно 

a[href^="http://"]').attr("target", "_blank");

однако, я не уверен, как «вернуть: ложь» в LI, чтобы он не закрывал UL при открытии пустого окна. Я хочу, чтобы пользователь мог видеть дочерний UL, на котором он был, когда он закрывал пустое окно.

Если это не ясно, пожалуйста, дайте мне знать.

Спасибо!

Ответы [ 2 ]

8 голосов
/ 21 августа 2010

Я думаю, что вы ищете, вероятно, event.stopPropagation ()

Вот документация: http://api.jquery.com/event.stopPropagation/

По сути, происходит то, что, когда вы нажимаете на <a>событие click срабатывает, но, поскольку оно содержится в <li>, событие click также вызывается для него.Этот процесс события, переходящего от дочернего к родительскому, называется пузырением событий.Вы можете использовать event.stopPropagation (), чтобы остановить его.

Предположим, у вас есть такая структура HTML: 

<ul>
    <li class="reveal">One<br />
        <a href="http://www.google.com" target="_blank">Google</a>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
        </ul>
    </li>
    <li class="reveal">Two<br />
        <a href="http://www.google.com" target="_blank">Google</a>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
        </ul>
    </li>
    <li class="reveal">Three<br />
        <a href="http://www.google.com" target="_blank">Google</a>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
        </ul>
    </li>
</ul>

Далее, мы скажем, что у вас есть правило CSS:

ul ul { display: none; }

Примените этот jQuery, и вы получите желаемый результат: 

$(function () {
    $('.reveal').click(function() {
        $(this).children('ul').slideToggle();
    });

    $('.reveal a').click(function(event) {
        event.stopPropagation();
    });
});

Вот демонстрация этого в действии: http://jsfiddle.net/PaxTg/

3 голосов
/ 21 августа 2010

вы можете захотеть взглянуть на порядок событий и затем остановить распространение вашего события в нужное время.

...