Как я могу получить это раскрывающееся меню ul li для отображения при наведении курсора с jquery или javascript?

Question

У меня есть следующий CSS:

<ul id="nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown Appear 1</a>
    <ul class="dropdown-menu">
        <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
    </li>
    <li><a href="#contact">Somelink</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown Appear 2</a>
    <ul class="dropdown-menu">
        <li><a href="#">Another Item 1</a></li>
            <li><a href="#">Another Item 2</a></li>
        </ul>
    </li>
</ul>

В настоящее время в CSS в раскрывающемся меню установлено свойство display: none. Я хочу сделать так, чтобы без необходимости присваивать идентификаторы любому из моих элементов DOM, пользователь мог навести курсор мыши или щелкнуть «Dropdown Appear 1» или «Dropdown Appear 2» и показать свои соответствующие выпадающие меню. Как мне это сделать? (Было бы неплохо, если бы был переход вниз.)

Answer 1

Есть ли причина, по которой вы хотите сделать это специально с JS? Эффекты, анимация и т. Д.

Не уверен, что вы просто пытаетесь отобразить подменю при наведении, потому что вы можете сделать это исключительно с помощью CSS (и без добавления уникальных идентификаторов в каждый вложенный неупорядоченный список). Вы должны установить отображение вложенного списка на «none» и при наведении указателя мыши на элемент «li» родительского списка вы можете изменить отображение на «block».

#nav li.dropdown ul { display: none; }

#nav li.dropdown:hover ul { display: block; }

Опять же, не уверен, что вы хотите использовать JS специально. Но, по крайней мере, с этим маршрутом пользователь все равно увидит выпадающий список в случае, если у него отключен JS (что мы надеемся, что нет!).

Answer 2

Самый простой способ - применить hover к li, чтобы при наведении курсора на подменю пользователь не вызывал событие отключения мыши из элемента a:

$('li.dropdown').hover(
    function(){
        $(this).find('ul').slideDown();
    },
    function(){
        $(this).find('ul').slideUp();
    });

Демонстрация JS Fiddle .

Ссылки:

• hover().
• find().
• slideDown().
• slideUp().

Answer 3

  $(document).ready(function(){

  $('.dropdown').each(function(){
  $(this).find('ul').hide();
  });


  $('.dropdown').hover(function(){
  $(this).find('ul').slideDown();
  },
    function(){
  $(this).find('ul').slideUp();

  });
        });