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

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

<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只会显示提醒信息

如果活动，Jquery垂直手风琴会扩展

1 个答案: