下拉菜单的若干种实现方法

先说比较普遍的就是滑动的下拉菜单，可以通过CSS来做，也可以用JS做

都挺简单的，主要是通过父元素触发，然后在子元素能够保持住父元素的状态。

都是用原生写的。

CSS实现方法：

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    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}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

JS实现方法：

    <style>
        /* 下拉按钮样式 */
        .dropbtn {
          background-color: #4CAF50;
          color: white;
          padding: 16px;
          font-size: 16px;
          cursor: pointer;
        }
    
        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
          position: relative;
          display: inline-block;
        }
    
        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          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
        }
    
        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
          background-color: #3e8e41;
        }
      </style>
  <div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
    </div>
  </div>

  <script>

    document.getElementsByClassName('dropdown')[0].onmouseover = function () {
      document.getElementsByClassName('dropdown-content')[0].style.display = 'block'
    }
    document.getElementsByClassName('dropdown')[0].onmouseout = function () {
      document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
    }
  </script>

第二种比较简单，就是点击按钮触发二级菜单，只能通过JS触发。

document.getElementsByClassName('dropdown')[0].onclick = function () {
      if (document.getElementsByClassName('dropdown-content')[0].style.display == 'block') {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
      } else {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'block'
      }
    }

这个就是做一个判断，也不难。这个效果是只能来回点击按钮，不方便，加一个点击其他地方也可以取消的方法

 document.getElementsByTagName('body')[0].onclick = function () {
      document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
    }

这个的意思是无论你点body元素的那里都会去隐藏，但是添加了发现我们没法通过点击按钮来呼出下拉菜单栏了，这是事件捕获的问题，当我们点击按钮的时候，通过冒泡让我们顺带着点击了body元素，所以我们其实是呼出了菜单又关闭了菜单。所以我们要阻止事件冒泡。

在按钮的触发时，带一个事件的参数e，然后通过e.stopPropagation() 来阻止冒泡就可以了

document.getElementsByClassName('dropdown')[0].onclick = function (e) {
      e.stopPropagation();
      if (document.getElementsByClassName('dropdown-content')[0].style.display == 'block') {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
      } else {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'block'
      }
    }

但是当页面复杂的时候，我们也需要点击其他的任意元素来取消。需要判断所点的元素是不是按钮或者下拉菜单的元素，首先通过JQuery的fn来定义一个方法

  jQuery.fn.isChildAndSelfOf = function (b) {
    return (this.closest(b).length > 0) 
  }

这个closest是寻找父元素的，返回被选元素的第一个祖先元素。

详细可以看文档：https://www.w3cschool.cn/jquery/traversing-closest.html

然后加上判断

    $(document).click(function (event) {
      if (!$(event.target).isChildAndSelfOf('.dropdown')) {
        $('.dropdown-content').hide();
      }
    });

这样就可以完成除了点菜单那里都现隐藏。不过要注意先引入jquery的js文件。