如何使用JQuery創建下拉菜單

Question

我找到了具有所需功能的小提琴。 但是，我不確定如何調整代碼（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中更新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>

和工作小提琴

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');
    });
});