Question

我的垂直菜单需要帮助。这就是我现在所拥有的： http://jsfiddle.net/x4NbH/

我想要做的是，如果我打开<ul>并点击打开菜单的另一部分，我希望关闭打开<ul>并打开新的。{1}}。例如，'item-1'已打开，我点击'item-2'并关闭'item-1'并打开'item-2'。

HTML：

<div class="menu-item">
<h4 id="item-1"><a href="#">Item 1</a></h4>
<ul id="item-1">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

<div class="menu-item">
<h4 id="item-2"><a href="#">Item 2</a></h4>
<ul id="item-2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

<div class="menu-item">
<h4 id="item-3"><a href="#">Item 3</a></h4>
<ul id="item-3">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

CSS：

.menu-item h4 {
    margin: 0px;
    padding: 0px;
}
.menu-item ul {
    margin: 0px;
    padding: 0px 5px;
    display: none;
}

JavaScript的：

$( "h4#item-1" ).click(function() {
    $( "ul#item-1" ).toggle( "blind", 1000 );
});

$( "h4#item-2" ).click(function() {
    $( "ul#item-2" ).toggle( "blind", 1000 );
});

$( "h4#item-3" ).click(function() {
    $( "ul#item-3" ).toggle( "blind", 1000 );
});

如何以简单的方式实现这一目标？

Answer 1

ID必须是唯一的，您可以使用类，尝试这样：

var $ul = $('ul');
$( "h4" ).click(function() {
    $ul.hide("blind", 1000);
    $(this).next().show( "blind", 1000);
});

http://jsfiddle.net/zaZLj/

Answer 2

试试这个：

$('h4').click(function(){
   $(this).closest('div').find('ul').show('blind',1000);
   $(this).closest('div').siblings().find('ul').hide('blind',1000);
});

Answer 3

这不像上面的Nikko Reyes示例那样光滑，但它可以在您提供的编码中使用，以显示用于切换的complete函数和.not() jQuery命令。我知道我做得更好但是我工作了8个多小时;）jsFiddle的东西在这里：http://jsfiddle.net/jtMaY/17/

$( "h4#item-1" ).click(function() {
    $( "ul#item-1" ).toggle( "blind", 1000,
        function () { $( "ul" ).not("#item-1").hide(); }
    );
});

$( "h4#item-2" ).click(function() {
    $( "ul#item-2" ).toggle( "blind", 1000,
        function () { $( "ul" ).not("#item-2").hide(); }
    );
});

$( "h4#item-3" ).click(function() {
    $( "ul#item-3" ).toggle( "blind", 1000,
       function () { $( "ul" ).not("#item-3").hide(); }
    );
});

使用jQuery切换关闭打开的部分

3 个答案: