jQuery切换菜单点击问题答案

【问题标题】：jQuery toggle menu click through problemsjQuery切换菜单点击问题
【发布时间】：2011-05-24 22:09:37
【问题描述】：

我只是想用 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;
        };

    });
});

我需要它来滑动切换，但也需要适当地处理点击，这样父列表项就不会点击，但子菜单项会点击进入它们的相关页面。

【问题讨论】：

标签： jquery menu toggle

【解决方案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/

更新：处理您在 cmets 中指定的其他情况。

【讨论】：

我在本地和 JSFiddle 都对此进行了测试，但它似乎不起作用。单击每个菜单项直接进入该页面，没有滑动切换（？）
Ian：我认为这就是您想要的，因为您的锚标签具有特定的目标（one.html 等）。我修改了我的答案，以便点击顶级锚点不会跟随他们的目标。
很抱歉。我应该指定的。我只是在模仿 CMS 输出的动作，我计划使用它来链接父母，即使他们有孩子时也不需要去任何地方。仍然存在一个小问题，尽管在该列表中没有子项的项目的链接也被停用。有没有办法检查列表项是否有子项，如果没有，则保留链接？感谢您的帮助。
谢谢。这似乎可以解决它！对不起我的无知，但我只是想弄清楚为什么需要第二个点击处理程序以及为什么具体将它放在 li 而不是上面的 li a 上？是否不能简单地说它是否有子菜单然后切换并阻止点击，但如果没有子菜单，请点击链接？显然它有效，但我只是想确切地了解它为什么以及它在做什么。再次感谢。
Ian：LI 的第二次单击处理程序，以便用户可以选择单击 LI 元素（其面积大于锚元素）以展开/关闭菜单项。我认为这在您的设计中很重要，因为您将单击事件处理程序绑定到问题中的 LI。

【解决方案2】：

return false;

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

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

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

（看到现在返回 false 了吗？）

【讨论】：

好点。我已将其更改为以下内容： $('ul#menu > li > a').click(function() {

【解决方案3】：

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

【讨论】：

感谢您的链接，但我不是在寻找插件或花哨的效果菜单。我只是想了解为什么它不起作用并从那里建立基础。对我来说，理解为什么比使用可以为我做的插件更重要。