Question

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

如果单击子菜单，则会下拉。如果单击其他子菜单，当前的子菜单会向上滑动，然后单击的子菜单会向下滑动。

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

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

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

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

Answer 1

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

$("#nav ul")

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

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

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

Answer 2

我修改了你的代码：

＆＃13;

$('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();
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: