子菜单向上滑动，如果它已经被选中，则向下滑动（错误）

Question

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

如果您单击子菜单，它会下拉。如果您单击不同的子菜单，当前菜单会向上滑动，然后您单击的子菜单会向下滑动。

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

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

如何防止这种情况发生？ 相反，如果它已经向下，我希望子菜单向上滑动。

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

Answer 1

您的问题出在选择器上。您使用下面的选择器将其他子菜单向上滑动，然后在导航中滑动所有子菜单。

$("#nav ul")

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

$("#nav ul").not($(".submenu-customers")).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>