下拉菜單只能通過單擊按鈕

Question

我正在嘗試創建一個下拉菜單，但我想僅通過單擊button來顯示和隱藏下拉菜單。 即使我單擊其中一個孩子，當前下拉菜單也隱藏起來。 如何解決？

小提琴 ：

<ul id="nav">
    <li class="parent"><button>Childrens</button>
        <ul class="sub-nav">
            <li>Johnny</li>
            <li>Julie</li>
            <li>Jamie</li>
        </ul>
    </li>
</ul>

Answer 1

試試吧：

http://jsfiddle.net/zyfv6nd0/

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

Answer 2

將選擇器從$('.parent')更改$('.parent button') ：

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

 #nav { list-style: none; padding: 0; margin: 0; } #nav > li { display: inline-block; vertical-align: top; position: relative; } #nav ul.sub-nav { position: absolute; min-width: 200px; display: none; top: 100%; left: 0; } #nav ul.visible { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="nav"> <li class="parent"> <button>Childrens</button> <ul class="sub-nav"> <li>Johnny</li> <li>Julie</li> <li>Jamie</li> </ul> </li> <li class="parent"> <button>Childrens</button> <ul class="sub-nav"> <li>Johnny</li> <li>Julie</li> <li>Jamie</li> </ul> </li> </ul> 

Answer 3

下拉菜單只能通過單擊按鈕

pure js 示例純js

  /* Cross-browser solution for classList.toggle() */ function myFunction2() { var x = document.getElementById("myDropdown"); if (x.classList) { x.classList.toggle("show"); } else { var classes = x.className.split(" "); var i = classes.indexOf("show"); if (i >= 0) classes.splice(i, 1); else classes.push("show"); x.className = classes.join(" "); } } 

  .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block} 

  <p>The classList property is not supported in Internet Explorer 9 and earlier.</p> <div class="dropdown"> <button id="myBtn" class="dropbtn" onclick="myFunction2()">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div>