Как отключить раскрывающийся список, нажав в другом месте страницы - stopPropagation? - PullRequest
Новая
       17

Как отключить раскрывающийся список, нажав в другом месте страницы - stopPropagation?

1 голос
/ 03 июля 2011

Интересно, может ли кто-нибудь помочь наконец решить проблему, которую я поднял на SO некоторое время назад.

Я не могу отменить эти выпадающие меню, нажимая за пределами кнопки или где-либо еще на странице.

Пожалуйста, посмотрите это jsFiddle .

Я видел людей, использующих stopPropagaton(), но не уверен, какпримените его здесь.

Есть идеи, как это сделать?

Мой код переключения: 

var cur = null;
$(".toggle").click(function(e){
    $('#nav ul:visible').hide();

    if(cur == null || cur.currentTarget != e.currentTarget)
    {
        if(cur != null)
        {
            $(cur.currentTarget)
                .children('a:first').children('span').removeClass('fc-state-active');
        }

        cur = e;
        $(cur.currentTarget)
            .children('a:first').children('span').addClass('fc-state-active');
        $(cur.currentTarget)
            .children('ul').show();
    }
    else
    {
        $(cur.currentTarget)
            .children('a:first').children('span').removeClass('fc-state-active');

        cur = null;
    }
});

1 Ответ

4 голосов
/ 03 июля 2011

Я считаю, что следующее должно работать для вас. Для этого используется функция focusout () jQuery: 

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
}).focusout(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
});

А вот обновленная скрипка: jSFiddle

РЕДАКТИРОВАТЬ: Следующие работы в FF и Chrome Новая скрипка: jsFiddle 

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
    hide = false;
}); 
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});

Причина: $(document).click() называется после $(".toggle").click()

РЕДАКТИРОВАТЬ 2: Рабочую скрипку можно найти здесь: jSFiddle 

var hide;
$(".toggle").click(function(){
    var active_span = $(this).children('a:first').children('span');   
    var active_ul = $(this).children('ul');

    $(active_span).toggleClass('fc-state-active');
    $("span.fc-state-active").not(active_span).removeClass('fc-state-active');
    $(active_ul).toggle();
    $("#nav ul:visible").not(active_ul).hide();
    hide = false;   
});
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});
...