Question

我使用jquery切换功能显示隐藏下拉菜单，但是如果打开一个菜单并且我尝试打开另一个菜单，那么前一个菜单没有隐藏任何人帮助我。

$(document).ready(function(){
    $("ul.subnav").parent().append("<span></span>");

    $("ul.topnav li span").click(function() {
        $(this).parent().find("ul.subnav").toggle('medium');
    }).hover(function() {
        $(this).addClass("subhover");
    }, function(){
        $(this).removeClass("subhover");
    });
});

<ul class="topnav">
    <li>
        <a href="#">Geneology</a>
        <ul class="subnav">
            <li><a href="#">Plan</a></li>
            <li><a href="#">Leg View</a></li>

        </ul>
    </li>
    <li>
        <a href="#">Smart Pin</a>
        <ul class="subnav">
            <li><a href="#">My Pin</a></li>
            <li><a href="#">Send Pins</a></li>
            <li><a href="#">Pin History</a></li>
            <li><a href="#">Request Pin</a></li>

        </ul>
    </li>
</ul>

Answer 1

我猜你的subnavs最初是用一些css隐藏的（如果没有，请告诉我你导航的初始状态）所以试试这个

$(document).ready(function(){
    $("ul.subnav").parent().append("<span></span>");

    $("ul.topnav li span").click(function() {
        var $this=$(this),
            $parent=$this.parent(),
            $shown=$('ul.topnav .shown').not($this.prev('.subnav')); //get the visible subnav but not the one I'm clicking

        //check if there are some subnav visible and hide it
        if($shown.size())
            $shown.hide('medium').removeClass('shown');

        $parent.find("ul.subnav").toggle('medium').toggleClass('shown');
    }).hover(function() { //I guess you are doing some hovering effect here
        $(this).addClass("subhover");
    }, function(){
        $(this).removeClass("subhover");
    });
});

点击另一个li项目时隐藏一个li项目

1 个答案: