Как развернуть выпадающий список jQuery, нажав в другом месте? (с jsFiddle ссылку)

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

Вопрос №1

Если вы нажмете на кнопку "Обзор" и нажмете ее снова, выпадающее меню будет переключено/отключено.

Но если вы нажмете на "обзор" один раз - затем нажмите на "за X" один раз - и так далее, все выпадающие списки останутся открытыми.

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

Вопрос №2

Это CSS (от fullCalendar шоу) имеет класс

fc-state-active который я хотел бы вставить в первый <span> , когда пользователь активирует выпадающий список, заменяя fc-state-default. Конечно, это должно касаться только нажатой кнопки.

Любая помощь в любом вопросе очень ценится!

Спасибо!

Редактировать:

В этот момент ответ @Demian Brecht очень близок к решению проблемы - но все равно я не могу развернуть выпадающее меню, нажав в любом месте либо на экране, либо нажав ту же кнопку еще раз.

Вы можете видеть текущее состояние этого кода в http://jsfiddle.net/qEtgR/

Если кто-нибудь может дать мне решение этой проблемы, это было бы здорово. Спасибо.
3 2
javascript css jquery toggle

3 ответа:

Попробуйте это для #1: 

$(".toggle").click(function(){
    $('#nav ul:visible').toggle();
  $('ul',this).toggle();
});

Edit: (переработано для завершения) 

var cur = null;
$(".toggle").click(function(){
    $('#nav ul:visible').toggle();
    console.log();
    if(cur != null)
    {
        cur.removeClass('fc-state-active').addClass('fc-state-default');
    }
    cur = $(this).children('a:first').children('span').removeClass('fc-state-default').addClass('fc-state-active');
    $('ul',this).toggle();
});

Скрипка здесь

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

Редактировать:

Итак, вот что я придумал (Извините, был бы раньше, но отсутствовал): 

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

    if(cur == null || cur.currentTarget != e.currentTarget)
    {
        if(cur != null)
        {
            $(cur.currentTarget)
                .removeClass('fc-state-active')
                .addClass('fc-state-default');
        }

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

        cur = null;
    }
});

$('body').children().not('ul#nav').click(function(e){
    $('#nav ul:visible').hide();

    $(cur.currentTarget)
            .removeClass('fc-state-active')
            .addClass('fc-state-default');

    cur = null;
});

Вы можете проверить обновление по тому же адресу скрипки. Предостережение к этому обновлению состоит в том, что пользователь должен нажать на любом месте на странице, которая содержит что-то (базовый селектор - body). Не смог найти хороший селектор для в любом месте , кроме элемента nav (вероятно, вложенного где-то в дочерних элементах объекта document), но я слишком устал, чтобы копать дальше:)

О, и я не был доволен структурой последнего обновления, поэтому я просто переписал его :P

2

Вопрос 1: Вы только переключаете текущего li ребенка ul, поэтому, конечно, остальные остаются видимыми. Попробуйте это: 

    $(".toggle").click(function(){
  $("#nav ul").slideUp();
  $("ul", this).slideDown();
});

Для вопроса 2 попробуйте: 

    $("span").removeClass("fc-state-active");
  $("span").addClass("fc-state-default");
 $("span", this).eq(0).removeClass("fc-state-default");
  $("span", this).eq(0).addClass("fc-state-active");
2

Я собираюсь помочь вам с вашим первым выпуском:

Что я делаю, так это прячу все из них, а затем показываю тот, который щелкнул, вот так: 

$(".toggle ul").hide();
$("ul",this).toggle();
1