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

如果我正确理解你的问题，这将满足你的要求：

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

将

return false; 

e.preventDefault() （并停止传播）添加到

中。而不是 标签。
将点击重新绑定到 或执行

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

（看到 现在返回 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/