1

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

我想要做的是，如果我有一个<ul>打开并单击以打开菜单的另一部分，我希望打开<ul>关闭并打开新的。例如“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 );
});

我怎样才能以简单的方式实现这一目标？

4

3 回答 3

4

ID 必须是唯一的，您可以使用类来代替，试试这个：

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

http://jsfiddle.net/zaZLj/

于 2013-01-23T01:25:01.940 回答
2

尝试这个：

$('h4').click(function(){
   $(this).closest('div').find('ul').show('blind',1000);
   $(this).closest('div').siblings().find('ul').hide('blind',1000);
});
于 2013-01-23T01:29:03.327 回答
1

这不像上面的 Nikko Reyes 示例那样巧妙，但它可以在您提供的代码中工作，以显示complete与 toggle 和.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(); }
    );
});
于 2013-01-23T01:51:32.377 回答