Question

我使用手风琴创建一个可折叠的菜单。但是当我向上滑动子菜单时，它只是重新打开子菜单。

jquery代码：

 $.ajax({
          url: 'MenuHandler.ashx',
          method: 'get',
           dataType: 'json',
             success: function (data) {
                  buildMenu($('#accordioning'), data);
                     $('#accordioning').menu();
                        }
                        });


                    function buildMenu(parent, items) {

                        $.each(items, function () {



                            var li;
                            if (this.Linkurl == '#' || this.MenuText == 'Home') {
                                li = $('<li class="test"><a href="#" class="link"><i class="fa fa-database"></i>' + this.MenuText + '<i class="fa fa-chevron-down"></i></a></li>');
                            }
                            else {

                                li = $('<li><a href="#">' + this.MenuText + '</a></li>');
                            }



                            li.appendTo(parent);

                            if (this.List && this.List.length > 0) {
                                var ul = $('<ul class="submenu" ></ul> ');
                                ul.appendTo(li);
                                buildMenu(ul, this.List);
                            }
                        });


                            $(function () {
                                var Accordion = function (el, multiple) {
                                    this.el = el || {};
                                    this.multiple = multiple || false;

                                    // Variables privadas
                                    var links = this.el.find('.link');
                                    // Evento
                                    links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown)
                                }

                                Accordion.prototype.dropdown = function (e) {
                                    var $el = e.data.el;
                                    $this = $(this),
                                        $next = $this.next();

                                    $next.slideToggle();
                                    $this.parent().toggleClass('open');


                                    if (!e.data.multiple) {
                                        $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
                                    };
                                }

                                var accordion = new Accordion($('#accordioning'), false);
                            });



                    }



        });

html代码：

<ul id="accordioning" class="accordioning"></ul>

css代码：

 h1 {
color: #FFF;
font-size: 24px;
font-weight: 400;
text-align: center;
margin-top: 80px;
 }

h1 a {
    color: #c12c42;
    font-size: 16px;
}

.accordioning {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
 background: #FFF;
 -webkit-border-radius: 4px;
-moz-border-radius: 4px;
 border-radius: 4px;
 }

.accordioning .link {
    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 42px;
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }

  .accordioning li:last-child .link {
    border-bottom: 0;
  }

  .accordioning li i {
    position: absolute;
    top: 16px;
    left: 12px;
    font-size: 18px;
    color: #595959;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }

    .accordioning li i.fa-chevron-down {
        right: 12px;
        left: auto;
        font-size: 16px;
    }

.accordioning li.open .link {
    color: #b63b4d;
}

.accordioning li.open i {
    color: #b63b4d;
}

    .accordioning li.open i.fa-chevron-down {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

  /**
 * Submenu
  -----------------------------*/


.submenu {
display: block;
background: #444359;
font-size: 14px;
 }

.submenu li {
    border-bottom: 1px solid #4b4a5e;
}

.submenu a {
    display: block;
    text-decoration: none;
    color: #d9d9d9;
    padding: 12px;
    padding-left: 42px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

    .submenu a:hover {
        background: #b63b4d;
        color: #FFF;
    }

Answer 1

尝试添加

e.preventDefault();
e.stopPropagation();

在您的Accordion.prototype.dropdown函数

中

子菜单的jquery切换问题

1 个答案: