jQuery下拉菜单垂直响应

Question

我正在尝试构建垂直菜单，但是不确定我是否选择了正确的方式！

单击菜单应显示！ 如果我单击另一个菜单，则上一个菜单应隐藏！ 请检查我的演示，菜单没有关闭前一个。

演示： http : //fiddle.jshell.net/5uWh2/

JS：

var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);


dropdownArray.forEach(function(el){
    var button = el.querySelector('a[data-toggle="dropdown-text"]'),
            menu = el.querySelector('.dropdown-content');

    button.onclick = function(event) {
    if(!menu.hasClass('show')) {
            menu.classList.add('show');
            menu.classList.remove('hide');
            event.preventDefault();
        }
        else {
      menu.classList.remove('show');
            menu.classList.add('hide');
            event.preventDefault();
        }
    };
})

Element.prototype.hasClass = function(className) {
  return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

Answer 1

您可以通过以下方式实现

$( "#menu a" ).click(function() {
   $menu = $(this).parent().find('ul');           
   $('#menu').find('ul').not($menu).removeClass('show');
   $menu.toggleClass('show');
});

演示版

Answer 2

jQuery(document).ready(function() {
  jQuery('#menu > li > a').click(function(){
    if(jQuery(this).next('.dropdown-content').length>0){
      jQuery('.dropdown-content').slideUp();
      if(jQuery(this).next('.dropdown-content:visible').size()){
       jQuery('.dropdown-content').slideUp();
      } else {
        jQuery(this).next('.dropdown-content').slideDown();
      }
      return false;
    }
      });
});

http://jsfiddle.net/5py85/1/