Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: Daniel FischerОтветов: 2

У меня есть два меню 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-menujquery

Ответы

Ответ 1 · рейтинг 5 · David Hellsing

Вам нужно привязать событие клика к 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>

Ответ 2 · рейтинг -1 · kgiannakakis

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы