Функциональность выпадающего меню jQuery на основе событий кликов (скрытие справки)

У меня есть два меню jQuery, которые правильно отображаются при нажатии «показать».

Например, допустим, у вас есть две ссылки:

«Шоу 1», «Шоу 2».

Вы нажимаете «Показать 1», а затем появляется div с «показать 1 контент».

Вы нажимаете «Показать 2», а затем появляется div с «показать 2 содержимого».

У меня работает до этого момента.

Очевидно, есть пара вещей, связанных с юзабилити, которые мне нужно решить. Если я нажму «Показать 1», а затем нажму «Показать 2», я хочу, чтобы «Показать содержимое 1» исчезло (скрыть div «Показать содержимое 1»)

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

Структура моего дома:

ul
 li.menu
  span= link_to 'Show 1'
  ul.dropdown.hidden
   li= link_to 'show 1 content'
 li.menu
  span= link_to 'Show 2'
  ul.dropdown.hidden
   li= link_to 'show 2 content'

My js:

  $("#search li.menu span a").click(function(event) {
    event.preventDefault();
    $(this).parent().siblings("ul.dropdown").toggleClass("hidden");
  });

Так что в основном мне просто нужно понять, как применять скрытый при нажатии за пределами поля ul.dropdown и как применять скрытый при нажатии на ДРУГОЕ поле ul.dropdown

Спасибо.


drop-down-menu jquery
person Daniel Fischer    schedule 08.12.2009    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вам нужно привязать событие клика к document и проверить цель (делегирование события). Если цель находится за пределами навигации, скройте раскрывающиеся списки и вернитесь.

Пример:

<ul id="nav">
    <li class="menu">
        <span><a href="#">Show 1</a></span>
        <ul class="dropdown">
            <li><a href="#">Show 1 content</a></li>
        </ul>
    </li>
    <li class="menu">
        <span><a href="#">Show 2</a></span>
        <ul class="dropdown">
            <li><a href="#">Show 2 content</a></li>
        </ul>
    </li>
</ul>
<script>

var nav = $('#nav');
nav.find('ul.dropdown').hide();

$(document).bind('click', function(e) {
    var target = $( e.target );
    if ( target.closest('#nav').length < 1 ) {
        nav.find('ul.dropdown').hide();
        return;
    }
    if ( target.parent().is('span') ) {
        var li = target.closest('li.menu');
        li.siblings().find('ul.dropdown').hide();
        li.find('ul.dropdown').toggle();
        e.preventDefault();
    }
})

</script>
person David Hellsing    schedule 08.12.2009

arrow_upward
-1
arrow_downward

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

person kgiannakakis    schedule 08.12.2009
comment
Это то, чему я пытаюсь научиться. Как вы указываете, когда щелкаете за пределами раскрывающегося списка? - person Daniel Fischer; 08.12.2009
comment
У меня уже есть скрытый класс для всех элементов, которые нужно скрыть. Я не знаю, как сказать jQuery скрыть его, если щелкнуть за пределами ul. Если бы вы могли указать больше, это было бы здорово. - person Daniel Fischer; 08.12.2009