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

return false;

将e.preventDefault（）（并停止传播）添加到＆lt; li＆gt;而不是＆lt; a＆gt;标签。将点击重新绑定到＆lt; a＆gt;或者做

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

（请参阅＆lt; a＆gt;现在获得返回false？）

Answer 2

已经多次这样做了。检查这些链接：

Answer 3

如果我理解你的问题，这将做你想要的事情：

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

更新：处理您在评论中指定的其他案例。

jQuery切换菜单点击问题

3 个答案: