javascript - 单击时下拉切换无法正常工作

Question

我搜索了之前给出的所有答案，但没有找到解决我问题的方法。

问题是，我正在使用下拉菜单。我想在点击时打开子菜单。

我写了下面的代码。

    <div class="container-fluid" id="main-container">
        <div id="sidebar" class="nav-collapse">
            <ul class="nav nav-list">
              <li>
                    <a href="#" class="dropdown-toggle" >
                        <i class="icon-edit"></i>
                        <span>Edit Profile</span>
                        <b class="arrow icon-angle-right"></b></a>                    
                    <ul class="submenu">
                        <li><a href="#">Edit Presonal Details</a></li>
                        <li><a href="#">Change Password</a></li>
                    </ul>
              </li>
            <div id="sidebar-collapse" class="visible-desktop">
                <i class="icon-double-angle-left"></i>
            </div>
        </div>
    </div>

Flaty.js 有如下代码:

$('#sidebar a.dropdown-toggle').click(function () {
    alert("clicked");
    var submenu = $(this).next('.submenu');
    var arrow = $(this).children('.arrow');
    if (arrow.hasClass('icon-angle-right')) {
        arrow.addClass('anim-turn90');
    }
    else {
        arrow.addClass('anim-turn-90');
    }
    submenu.slideToggle(400, function(){
        if($(this).is(":hidden")) {
            arrow.attr('class', 'arrow icon-angle-right');
            $("#sidebar.sidebar-fixed .nav").getNiceScroll().resize();
        } else {
            arrow.attr('class', 'arrow icon-angle-down');
            scrollableSidebar();
        }
        arrow.removeClass('anim-turn90').removeClass('anim-turn-90');
    });
});

这个的CSS:

.dropup .caret,
      .navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid #000000;
  content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px 6px;
          border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  -webkit-border-radius: 5px 5px 5px 0;
     -moz-border-radius: 5px 5px 5px 0;
          border-radius: 5px 5px 5px 0;
}

.dropdown-submenu > a:after {
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-left-color: #cccccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
     -moz-border-radius: 6px 0 6px 6px;
          border-radius: 6px 0 6px 6px;
}

.dropdown .dropdown-menu .nav-header {
  padding-right: 20px;
  padding-left: 20px;
}

侧边栏的末尾还有一个按钮可以隐藏和显示。它也不起作用。

Answer 1

此代码无效:

if($(this).is(":hidden")) {
        arrow.attr('class', 'arrow icon-angle-right');
        $("#sidebar.sidebar-fixed .nav").getNiceScroll().resize();
    } else {
        arrow.attr('class', 'arrow icon-angle-down');
        scrollableSidebar();
    }
    arrow.removeClass('anim-turn90').removeClass('anim-turn-90');

而且我们在您的代码中没有这些功能。但是当删除一切工作。看看这个:http://jsfiddle.net/j6jtd7fj/