HTML CSS jQuery 2 层菜单问题答案

【问题标题】：HTML CSS jQuery 2-Tier Menu IssueHTML CSS jQuery 2 层菜单问题
【发布时间】：2012-01-01 16:09:18
【问题描述】：

所以我制作了这个超级精简版的 html css jquery 导航菜单，并给出下面的代码，它处理子菜单项就好像它是包含 li 一样。我想我可以理解它将子菜单 ul 视为 li 的一部分。问题变成了我如何区分这种行为，以便实际遵循子菜单链接而不是阻止默认。

<html>
<head>
<style type="text/css">
    #content ul {margin:0;}
    #content ul li {float:left; background:#000; list-style:none;}
    #content ul li a {display:block; text-decoration:none; padding:10px 40px;}
    #content ul li ul {position:absolute; padding:0;}
    #content ul li ul li {float:none; background:#ccc;}
</style>
</head>

<body>
<div id="content">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li>
            <a href="#">3</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>
</div>          
</body>
</html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$('#content ul li').has('ul').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});
</script>

编辑：我希望所有顶级链接和子菜单链接都能正常工作。我试图操纵的唯一事情是具有子菜单的顶级 li。

【问题讨论】：

标签： jquery html css menu nav

【解决方案1】：

如果您更改您的初始选择器，使其以“内容”的第一个子锚为目标，如下所示：

$('#content > ul > li > a').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});

它会起作用的。我建议您只需将 css 类添加到您想要将点击事件绑定到的每个锚标记。这样会更简洁，并且在标记更改时不太可能中断。

<div id="content">
    <ul>
        <li><a class="mainNav" href="#">1</a></li>
        <li><a class="mainNav" href="#">2</a></li>
        <li>
            <a class="mainNav" href="#">3</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a class="mainNav" href="#">4</a></li>
    </ul>
</div>

和

$("#content .mainNav").click(function(e) { e.preventDefault(); });

更新

您的原始答案非常接近。问题是您正在选择所有后代 li 元素。我添加了子选择器来解决这个问题。

$('#content ul li').has('ul').children('a').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});

【讨论】：

第一位断开所有顶级链接。我只想操作包含子菜单的那个。并且添加课程确实会让它变得容易，但由于我不会进入的原因，我没有那种奢侈。 bla bla bla 框架导航菜单。