jQuery toggle menu click through problems

Question

Я просто пытаюсь создать простое меню переключения с помощью jQuery, но не могу заставить его работать.

В его нынешнем состоянии он не скользит тумблер

HTML:

<ul id="menu"> 
    <li><a href="one.html">One</a> 
     <ul> 
      <li><a href="one-one.html">one one</a></li> 
      <li><a href="one-two.html">one two</a></li> 
      <li><a href="one-three.html">one three</a></li> 
     </ul> 
    </li> 
    <li><a href="two.html">Two</a></li> 
    <li><a href="three.html">Three</a> 
     <ul> 
      <li><a href="three-one.html">three one</a></li> 
      <li><a href="three-two.html">three two</a></li> 
      <li><a href="three-three.html">three three</a></li> 
     </ul> 
    </li> 
    <li><a href="four.html">Four</a></li> 
</ul> 

JS:

$(document).ready(function() { 

    // Hide the sub menu items first 
    $("ul#menu > li > ul").hide(); 

    // On click 
    $('ul#menu > li').click(function() { 

     // If there are sub items toggle them & prevent default click action 
     if (('ul#menu > li').has('ul').length > 0) { 
      $('ul#menu > li > ul').slideToggle("slow"); 
      return false; 
     }; 

    }); 
}); 

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

Answer 1

Это будет делать то, что вы хотите, если я правильно понимаю ваш вопрос:

$(document).ready(function() { 

    // Hide the sub menu items first 
    $("ul#menu > li > ul").hide(); 

    // On click 
    $('ul#menu > li > a').click(function() { 
     if($('ul', $(this).parent()).children().length) { 
      $('ul', $(this).parent()).slideToggle("slow"); 
      return false; 
     } else { 
      return true; 
     } 
    }); 
    $('ul#menu > li').click(function(e) { 
     // If there are sub items toggle them & prevent default click action 
     if ($(e.target).is("li")) { 
      // or (e.target == this) if you don't want child li's to toggle 
      $('ul', this).slideToggle("slow"); 
      return false; 
     } else { 
      return true; 
     } 

    }); 
}); 

Вы можете проверить его здесь: http://jsfiddle.net/5fNbh/

Обновление: позаботится о дополнительных случаях, указанных в комментариях.

Answer 2

The

return false; 

добавляет e.preventDefault() (и остановить распространение) в < li> вместо < тег>. пересвязать нажмите на < а> или сделать

$('#menu') 
    .find('li').has('ul') 
    .find('a').click(function() { return false; }); 

(см < а> теперь получает возвращение ложным?)

Answer 3

Это было сделано несколько раз. Проверьте эти ссылки из:

• http://www.zlwo.com/plugins/15-best-multi-level-menu-jquery-plugins-and-tutorials/
• http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/
• http://www.narga.net/sexy-jquery-drop-down-multi-level-menu/