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

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

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

都是用原生写的。

CSS实现方法：

  下拉菜单
  

    1
    2
    3
  

JS实现方法：

    
  

    下拉菜单
    

      1
      2
      3
    
  

  

第二种比较简单，就是点击按钮触发二级菜单，只能通过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文件。