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

Question

Пожалуйста см. Эту скрипку .

ВОПРОС # 1

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

Но если вы нажмете «Обзор» один раз - затем нажмите «За X» один раз - и т. Д., Все раскрывающиеся списки останутся открытыми.

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

ВОПРОС # 2

Этот CSS (из fullCalendar A Shaw) имеет класс

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

Любая помощь с любой проблемой приветствуется!

Спасибо!

РЕДАКТИРОВАТЬ:

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

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

Если кто-нибудь может дать мне решение, это было бы замечательно.Спасибо.

Answer 1

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

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

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

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();
});

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

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

Edit:

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

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;
});

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

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

Answer 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");

Answer 3

Я помогу вам с вашей первой проблемой:

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

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