jQuery DOM traversal sub sub descendants

Я создал реперсономическую двухуровневую навигацию с использованием jQuery, и он отлично работает независимо от одной вещи - ссылки 2-го уровня (подменю) вызывают открытие следующего подменю, когда они не должны открываться вообще ничего.jQuery DOM traversal sub sub descendants

 <nav> 
      <h2><a href="#">NAV</a></h2> 
      <ul id="dropNav"> 
       <li><a href="#">This site</a> 
        <ul> 
         <li><a href="#">DD Link 01</a></li> 
         <li><a href="#">DD Link 02</a></li> 
         <li><a href="#">DD Link 03</a></li> 
        </ul> 
       </li> 
       <li><a href="#">About us</a> 
        <ul> 
         <li><a href="#">DD Link 01</a></li> 
         <li><a href="#">DD Link 02</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Portfolio</a> 
        <ul> 
         <li><a href="#">DD Link 01</a></li> 
         <li><a href="#">DD Link 02</a></li> 
         <li><a href="#">DD Link 03</a></li> 
         <li><a href="#">DD Link 04</a></li> 
         <li><a href="#">DD Link 05</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Prices</a> 
        <ul> 
         <li><a href="#">DD Link 01</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Social</a> 
        <ul> 
         <li><a href="#">DD Link 01</a></li> 
         <li><a href="#">DD Link 02</a></li> 
         <li><a href="#">DD Link 03</a></li> 
         <li><a href="#">DD Link 04</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav>

$ (документ) .ready (функция() {

$(function() { 
    var pull  = $('nav > h2'); 
     menu  = $('nav ul:first'); 
     menuHeight = menu.height(); 

     $(pull).on('click', function(e) { 
      e.preventDefault(); 
      menu.slideToggle(); 
    }); 
}); 


$("#dropNav > li").on("click", function(e) { 
    e.preventDefault(); 
    $(this).siblings().children().next().slideUp(); // when opening a sub 
    $(this).find("ul").slideToggle(); // toggle the submenu 
});

});

Смотрите мой JSFiddle

Как отключить эти ссылки 2-го уровня?

источник

2015-02-12 ChrisClancy

Я не использую JQuery много (или вообще, на самом деле), но не могли бы вы попробовать установить вещь (не знаю его имени) для '«#dropNav> li> уль> иль»' к пустой функции? Если это сработает, дайте мне знать, и я отвечу ему. –

как насчет '$ (" # dropNav> li "). Not (" # dropNav> li> ul> li "). On (" click ", function (e) {' – atmd

У меня на самом деле нет ответа для но обратите внимание на две вещи: 1) Если вы измените hrefs своих пунктов меню верхнего уровня (About Us, Portfolio и т. д.), вы заметите, что зависание над любым элементом подменю на самом деле показывает href для следующего верхнего уровня пункт меню. Вот почему открывается следующее подменю - на самом деле вы думаете, что нажимаете на него, что причудливо. 2) Если вы удалите CSS-запрос и его содержащиеся в нем правила, эта проблема исчезнет (хотя форматирование становится испорченным). Таким образом, кажется, что одно из этих правил (возможно, одно с «: hover») вызывает вашу проблему. – radiaph

Развернувшись на ответ phari, он выглядит как проблема позиционирования CSS.

/* set up sub nav hover */ 

nav ul li a { 
padding:10px 25px 10px 25px; 
display:block; 
/*position:relative;*/ /*commenting out this line seemed to fix it*/ 
}

Вы также можете взглянуть на jQueryUI, который имеет удобную функцию аккордеона.

jQueryUI Accordion

источник

2015-02-12 17:10:50 bowfinger

Спасибо. Я использовал аккордеон раньше, но я пытаюсь создать свою собственную версию. – ChrisClancy

ответ

Смежные вопросы