只需点击按钮即可下拉菜单

Question

我正在尝试制作一个下拉菜单，但我想通过点击button来显示和隐藏下拉列表。目前，即使我点击其中一个孩子，下拉也会隐藏。如何解决？

Fiddle：

<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/

import logging
logging.basicConfig()

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

仅通过点击按钮下拉菜单

示例 classList.toggle pure js

＆＃13;

＆＃13;

      /* 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(" "); 
        }
      }

＆＃13;

      .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}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;