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');
});

Demo

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/

jquery下拉列表垂直菜单响应

2 个答案: