javascript - 如何使用 JQuery 创建下拉菜单

Question

我找到了一个具有我想要的功能的 fiddle 。但是，我不确定如何调整代码 (css) 以使其下拉菜单链接。

当我点击 = 时，我希望菜单下拉。原始代码通过单击父链接并显示子链接来工作。我认为它可以适用于我的实例，但不确定如何。

我想要完成的是单击 = 删除元素 1 和元素 2。否则它们将被隐藏。

HTML

<!-- original code -->
<ul id="nav">
    <li>Home</li>
    <li class="parent">About
        <ul class="sub-nav">
            <li>Johnny</li>
            <li>Julie</li>
            <li>Jamie</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

<!-- my code -->
<div class="header-nav">
  <nav class="nav-menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li> 
    </ul>
  </nav>

  <a href="#" id="menu-icon"></a>
</div>

JS

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});

// rename the JS to use the id/class for my script

JSfiddle 在这里 https://jsfiddle.net/cRsZE/982/

Answer 1

您必须更新 jQuery 中的点击事件才能点击菜单图标。这有效:

$(document).ready(function() {
    $('#menu-icon').click(function() {
        $('.nav-menu ul').toggleClass('visible');
    });
});

编辑 根据评论的要求，要让菜单显示在菜单图标下方，您只需将菜单图标重新定位到 ul 上方，就像这样:

<div class="header-nav">
  <a href="#" id="menu-icon"></a>
  <nav class="nav-menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li> 
    </ul>
  </nav>
</div>

和working Fiddle