JQuery выпадающее меню при наведении или при нажатии

Question

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

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

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

<style> 
.sub-menu {display: none;} 
</style> 


<ul class="menu"> 
    <li>child 1 
    <ul class="sub-menu"> 
     <li>child 1.1 
     <ul class="sub-menu"> 
      <li>child 1.1.1</li> 
      <li>child 1.1.2</li> 
     </ul> 
     </li> 
     <li>child 1.2 
     <ul class="sub-menu"> 
      <li>child 1.2.1</li> 
      <li>child 1.2.2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li>child 2 
    <ul class="sub-menu"> 
     <li>child 2.1</li> 
     <li>child 2.2</li> 
    </ul> 
    </li> 
</ul> 

Это то, что я придумал, но оно не работает. При наведении курсора на ребенка 1.1 показаны как братья, так и члены 1.1 и 1.2.

$("ul.menu li").hover(function() { 
    $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
}); 

$("ul.menu li ul.sub-menu").hover(function() { 
    $(this).find("ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
}); 

Answer 1

Попробуйте следующие решения, непосредственно ориентированных на ul

решение A:

---

// previous (following) is very inefficient and slow: 
// -- $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
// Rather, target the exact ULs which are Direct Children 

$("ul.menu").find('li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').slideUp(); 
     // If something Slides Down, it should slide up as well, 
     // instead of plain hide(), your choice - :) 
    } 
); 

Решение В:

---

для большей точности над обоими ULS

Update: Раствор хорошо работает и делает B избыточную

$("ul.menu").find('> li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
); 

$("ul.sub-menu").find('> li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
); 

Проверить Fiddle

Answer 2

Это непроверено .. и вам нужно немного расширить его.

$('ul.menu li').siblings('ul:first-child').on('click', function() { 
if($(this).is(':visible')) { 
    $(this).hide(); 
} 
else { 
    $(this).show(); 
} 
}) 

$('ul.menu li').siblings('ul:first-child').hover(
function() { 
    $(this).show(); 
}, 
function() { 
    $(this).hide(); 
} 
) 

Редактировать: Как я вижу, ваша структура непоследовательна. Иногда вы размещаете список IN литий элемент, иногда он помещается как брат ...