Question

在我的响应式下拉菜单中，我希望能够在单击菜单项时执行以下操作：

如果链接没有子节点，则正常运行
如果父链接有子级，则会阻止父级显示默认值并显示子级
父和子链接现在正常运行（即点击显示子项后没有preventDefault）

我已经完成的（非功能）JQuery在下面，这是我的 Fiddle （编辑 - 简化示例）

var parentWithChildren = $('region-responsive-nav ul');
//var parentWithChildren = $('region-responsive-nav ul').children('has:ul').length > 0 );

$('.region-responsive-nav ul ul').hide();
//prevent default once
if (parentWithChildren.children('has:ul').length > 0 ) {
      $('.region-responsive-nav ul li').one(function(event) {
        $(this).children('ul').slideToggle();
        event.preventDefault();
      });
}else{
    //open link immediately 
}

请参阅下面的标记。（由于我的编辑简化了。请注意，它在同一<ul>内有两个<li>，但我无能为力。

<nav class="region-responsive-nav">
    <ul>
        <li>One</li>
        <li>Two
            <ul class="sub">
                <li>Two A</li>
                <li>Two B</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>Three</li>
        <li>Four
            <ul>
                <li>Four A</li>
                <li>Four B</li>
            </ul>
        </li>   
    </ul>
</nav>

我认为我非常接近（至少在概念上），所以我会赞赏这些指示。

提前致谢

Answer 1

尝试使用此事件处理程序来处理父<li>的onclick：

$('.region-responsive-nav ul li').on('click', function(event) {
    // Check if the <li> has hidden children 
    if ($(this).children('ul:not(:visible)').length > 0) {
        event.preventDefault();
        // Display children
    } else {
        // Normal behaviour
    }
});

这将检查<li>是否有点击时隐藏的任何子<ul>元素，您可以相应地处理它们。

请记住，此事件处理程序也将绑定到子<li>。如果您只想在代码中的第一组<li>中使用此行为，请改为使用this selector：$('.region-responsive-nav > ul > li')。

<强>更新

JSFiddle根据您更新的JSFiddle演示此解决方案：https://jsfiddle.net/tadhbb3a/2/

我已将所有列表项目都添加到链接中，这样您就可以看到带有子项的链接只显示子项而不将用户发送到链接，但没有子项的项目作为普通链接工作。

另外，正如您在其中一条评论中澄清的那样，您希望已显示有子项的父级链接可以作为普通链接使用，以便添加。

Answer 2

好的，它很简陋，但我认为它符合你的要求：

$(document).ready(function () {
    // Hide the submenus that should be hidden
    $('li > ul').hide();

    // Make the li elements that don't have submenus do something
    $("li:not(:has(ul))").click(function() {
        alert("do something");
    });

    // I used hover to show and hide but any event will do
    // (only for li elements that have submenus)
    $("li:has(ul)").hover(function() {
        $(this).children("ul").slideToggle();
    }, function() {
        $(this).children("ul").slideToggle();
    });
});

请参阅 fiddle

点击阻止父级的默认值{childern

2 个答案: