下拉菜单仅通过单击按钮答案

【问题标题】：Drop down menu only by click on button下拉菜单仅通过单击按钮
【发布时间】：2016-06-30 06:42:27
【问题描述】：

我正在尝试制作一个下拉菜单，但我想通过单击 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>

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

试试看：

http://jsfiddle.net/zyfv6nd0/

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

【讨论】：

非常感谢！

【解决方案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>

【讨论】：

如何创建几个独立的按钮？
@TheMan 你有几个下拉菜单吗？
@TheMan 我已经更新了我的答案，现在您可以拥有任意数量的菜单）
是的，几个独立的菜单通过点击下拉。
如何让按钮保持一行？

【解决方案3】：

仅通过单击按钮下拉菜单

示例classList.toggle纯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>

【讨论】：