Jquery垂直手风琴展开如果活跃

Question

我不知道jquery好，所以请不要评价我。

我有手风琴效果的垂直菜单，我想：如果我点击子元素，比手风琴菜单不会崩溃，但保持展开直到我选择另一个元素。现在，每次点击后菜单都会崩溃。

我的手风琴菜单的样子：

<ul class="menu menu-sidebar"> 
    <li class="level1 item139 parent active"> 
     <span class="separator level1 parent active"> 
     <span>Menu item name</span> 
     </span> 
     <div style="display: block; height: 146px;"> 
     <ul class="nav-child unstyled small level2"> 
      <li class="level2 item140"> 
       <a href="custom-link"> 
        <span>Level 2 item name</span> 
       </a> 
      </li> 
      <li class="level2 item141"> 
       <a href="custom-link2"> 
        <span>Level 2 item name2</span> 
       </a> 
      </li> 
     </ul> 
     </div> 
    </li> 
</ul> 

jQuery脚本：

(function (e) { 
var a = function() {}; 
e.extend(a.prototype, { 
    name: "accordionMenu", 
    options: { 
     mode: "default", 
     display: null, 
     collapseall: !1, 
     toggler: "span.level1.parent", 
     content: "ul.level2", 
     onaction: function() {} 
    }, 
    initialize: function (a, b) { 
     var b = e.extend({}, this.options, b), 
      f = a.find(b.toggler); 
     f.each(function (a) { 
      var c = e(this), 
       d = c.next(b.content).wrap("<div>").parent(); 
      d.data("height", d.height()); 
      c.hasClass("active") || a == b.display ? d.show() : d.hide().css("height", 0); 
      c.bind("click", function() { 
       g(a) 
      }) 
     }); 
     var g = function (a) { 
      var c = 
       e(f.get(a)), 
       d = e([]); 
      c.hasClass("active") && (d = c, c = e([])); 
      b.collapseall && (d = f.filter(".active")); 
      switch (b.mode) { 
      case "slide": 
       c.next().stop().show().animate({ 
        height: c.next().data("height") 
       }, 400); 
       d.next().stop().animate({ 
        height: 0 
       }, 400, function() { 
        d.next().hide() 
       }); 
       setTimeout(function() { 
        b.onaction.apply(this, [c, d]) 
       }, 401); 
       break; 
      default: 
       c.next().show().css("height", c.next().data("height")), d.next().hide().css("height", 0), b.onaction.apply(this, [c, d]) 
      } 
      c.addClass("active").parent().addClass("active"); 
      d.removeClass("active").parent().removeClass("active") 
     } 
    } 
}); 
e.fn[a.prototype.name] = function() { 
    var h = arguments, 
     b = h[0] ? h[0] : null; 
    return this.each(function() { 
     var f = e(this); 
     if (a.prototype[b] && f.data(a.prototype.name) && "initialize" != b) f.data(a.prototype.name)[b].apply(f.data(a.prototype.name), Array.prototype.slice.call(h, 1)); 
     else if (!b || e.isPlainObject(b)) { 
      var g = new a; 
      a.prototype.initialize && g.initialize.apply(g, e.merge([f], h)); 
      f.data(a.prototype.name, g) 
     } else e.error("Method " + b + " does not exist on jQuery." + a.name) 
    }) 
} 
})(jQuery); 

Answer 1

你必须防止子元素click事件的传播 例如：

<div id="parent"> 
<ul id="list1"> 
    <li></li> 
    <li></li> 
<ul> 
<ul id="list2"> 
    <li></li> 
    <li></li> 
<ul> 
</div> 


$('#parent').click(function(){alert('abcd')}) 

$('#parent').find('#list1').click(function(e){ 

    stopPropagation(); 
}) 

现在点击list2将只显示提醒信息