子菜单向上滑动，如果它已经被选中，则返回菜单(bug)

Question

你好，我的jQuery垂直手风琴样式菜单有问题。

如果你点击一个子菜单，它就会下降。如果单击另一个子菜单，则当前的子菜单向上滑动，然后单击的子菜单向下滑动。

我正在使用.slideUp() jQuery函数来默认所有子菜单回到向上的位置，然后向下滑动下一个子菜单。

问题是当你点击一个子菜单时，它会下降，然后你点击同一个子菜单，然后它会向上滑动，然后再向下滑动。

我怎样才能防止这种情况发生呢？相反，如果子菜单已经关闭，我希望子菜单向上滑动。

请看我的JSFiddle：http://jsfiddle.net/o5w37zva/

Answer 1

你的问题在选择器上。在选择器slideUp下面使用其他子菜单，然后幻灯片导航中的所有子菜单。

$("#nav ul")

如果使用此选择器，则需要使用.not()函数修改它，并删除函数中的当前$( this )元素。

$("#nav ul").not($(".submenu-customers")).slideUp();

使用此选择器，如果用户单击打开的子菜单，它将仅为slideUp。您可以看到一个演示：http://codepen.io/ogzhncrt/pen/bdypBK

Answer 2

我对你的代码做了一些修正：

​

$('document').ready(function () {
  
    $('#nav li').on('click', function (e) {
        e.preventDefault();
        
    	$(this).find('> a').addClass('selected-sub');
        $(this).find('.submenu').slideToggle();
        
        $(this).siblings().find('> a').removeClass('selected-sub');
        $(this).siblings().find('.submenu').slideUp();
    });
    
    $('.submenu li').on('click', function (e) {
        e.stopPropagation();
    });
});

.submenu {
  display: none;
}

ul#nav li, .submenu li {
  list-style-type: none;
}

ul#nav li a {
  color: #CCC;
  display: block;
  text-decoration: none;
  padding: 13px 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0A0A0A;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

ul#nav li a:hover, ul#submenu li a:hover {
  background-color: #030303;
  text-decoration: none;
}

ul#submenu li a {
  color: #CCC;
  display: block;
  text-decoration: none;
  padding: 13px 10px;
  padding-left: 30px;
  font-size: 0.8em;
  border-bottom: 1px solid #0A0A0A;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

ul#nav li a.selected, ul#nav li a:active {
  background-color: #030303;
  text-decoration: none;
}

ul#nav li a.selected-sub, ul#nav li a.selected-sub:hover {
  background-color: #3C3C3C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
    <li><a id="dashboard" href="#">Dashboard</a></li>
    <li><a id="customers" class="selected-sub" href="#">Customers</a>
        <ul class="submenu submenu-customers">
            <li><a id="view-customers" class="selected" href="#">View Customers</a></li>
            <li><a id="add-customer"  href="#">Add Customer</a></li>
            <li><a id="manage-customers"  href="#">Manage Customers</a></li>
        </ul>
    </li>
    <li><a id="invoices" href="#">Invoices</a>
        <ul class="submenu submenu-invoices">
            <li><a id="view-invoices"  href="#">View Invoices</a></li>
            <li><a id="add-invoice"  href="#">Add Invoice</a></li>
            <li><a id="manage-invoices"  href="#">Manage Invoices</a></li>
        </ul>
    </li>
    <li><a id="employees" href="#">Employees</a>
        <ul class="submenu submenu-employees">
            <li><a id="view-employees"  href="#">View Employees</a></li>
            <li><a id="add-employee"  href="#">Add Employee</a></li>
            <li><a id="manage-employees"  href="#">Manage Employees</a></li>
        </ul>
    </li>
    <li><a id="services" href="#">Services</a>
        <ul class="submenu submenu-services">
            <li><a id="view-services"  href="#">View Services</a></li>
            <li><a id="add-service"  href="#">Add Service</a></li>
            <li><a id="manage-services"  href="#">Manage Services</a></li>
        </ul>
    </li>
    <li><a id="clock" href="#">Clock</a></li>
</ul>

​