代码之家 › 专栏 › 技术社区 › Julian

子菜单向上滑动,如果已经向下选择(错误)

submenu accordion drop-down-menu html jquery

Julian · 技术社区 · 11 年前

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

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

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

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

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

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

2 回复 | 直到 11 年前

oguzhancerit 11 年前

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

$("#nav ul")

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

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

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

mwl 11 年前

我对你的代码进行了一些修复:

$('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>