Question

所以我有这个HTML：

<ul>
    <li><a>categ 1</a>
        <ul>
           <li><a>subcateg 1</a><li>
           <li><a>subcateg 1</a><li>
        </ul>
    <li><a>categ2</a>
        <ul>
           <li><a>subcateg 2</a><li>
           <li><a>subcateg 3</a>
              <ul>
                <li><a>sub sub categ 3</a><li>
                <li><a>sub sub categ 3</a><li>
              </ul>
           <li>
        </ul>
</ul>

等

和js是http://jsfiddle.net/fMm3A/ - 点击红色区域（需要有一个图像，但是对于这个测试我只是放了一个红色的bg）

我想打开子菜单，但不要关闭父分支，但是当我打开其他分支时，其他分支将关闭

谢谢

Answer 1

你也可以用CSS做到这一点：

e.g。

更改你的CSS

#leftNav > li > ul { list-style:none; }

到此：

#leftNav > li > ul { list-style:none; display:none;}
#leftNav > li:hover > ul { list-style:none; display:block;}

注意：这仅适用于顶级。对于下一级，你需要做同样的事情。

example

Answer 2

你在这里发布的HTMl列表中有很多错误（你没有关闭列表（''），你忘记了一些标签......但是，在纠正它们之后：

这个怎么样：http://jsfiddle.net/wpWmM/2/

以下是您的代码：http://jsfiddle.net/fMm3A/12/

$('li').click(function(e){
    e.stopPropagation();
    $(this).children('ul').slideToggle();
    $(this).closest('.parent').siblings().children('ul').slideUp();
});

CSS：

ul{
    display:none;
}
ul.visible{
    display: block;
}

在HTMl中，您需要将类parent添加到主要元素，将类visible添加到主ul。你可以看到它on my fiddle.

Answer 3

将一些课程应用于每个菜单链接，例如menuLink

使用类ul

隐藏所有父hide

比试试这个

$('.menuLink').click(function(){
           $(".hide").not($(this).next()).hide();
            $(this).next().toggle('slow');
        });

EXAMPLE

点击显示隐藏菜单

3 个答案: