用jQuery关闭开放部分切换

我需要垂直菜单的帮助。这就是我现在所拥有的： http://jsfiddle.net/x4NbH/用jQuery关闭开放部分切换

我想要做的是，如果我有一个<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); 
});

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

来源

2013-01-23 justanotherhobbyist

的ID应该是每页唯一的。不要在不同的元素上重复使用相同的ID。 –

请始终在问题中包含相关代码。 –

该代码位于JSFiddle上。 – JakeGould

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

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

http://jsfiddle.net/zaZLj/

来源

2013-01-23 01:25:01 undefined

非常感谢。 – justanotherhobbyist

实际上，这在小提琴中很有效，但是在html5boilerplate中停止工作。有什么线索可能是什么？我使用与小提琴中相同的jquery和jquery-ui版本。 – justanotherhobbyist

试试这个：

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

来源

2013-01-23 01:29:03

比我的工作更好的解决方案！ – JakeGould

这不是因为日光雷耶斯例子一样光滑以上，但它可以在您提供的代码中使用，以显示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-23 01:51:32 JakeGould

用jQuery关闭开放部分切换

回答

相关问题