JQuery переключить меню, нажмите через проблемы

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

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

• 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/

Answer 2

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

$(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 3

return false; 

добавляет e.preventDefault () (и останавливает распространение) к

вместо тега .перепривязать клик к или сделать

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

(см.

теперь возвращает ложь?)