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

Question

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

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

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

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

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

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

Answer 1

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

$("#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>

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

Sub menu slides up then back down if it is already down selected (bug)

html

jquery

accordion

submenu

drop-down-menu