Question

我发现了一个具有我想要功能的小提琴。但是，我不知道如何调整代码（css）以使其下拉菜单链接。

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

我想要完成的是点击= drop Item 1和Item 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中的click事件才能单击菜单图标。这有效：

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

Answer 2

需要像这样更新代码：

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

文档：https://jqueryui.com/menu/

Answer 3

稍微清理一下代码。喜欢这个？

https://jsfiddle.net/cshanno/cRsZE/990/

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

如何使用JQuery

3 个答案: