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

我的垂直菜单需要帮助。这就是我现在拥有的：

我想做的是，如果我打开了一个

，然后单击打开菜单的另一部分，我想关闭打开的

，打开新的部分。 例如，“项目1”处于打开状态，我单击“项目2”，这将关闭“项目1”并打开“项目2”

HTML:

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 );
});

---

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

ID必须是唯一的，您可以使用类，请尝试以下方法：

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

---

ID必须是唯一的，您可以改用类，请尝试以下操作：

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

试试这个：

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

试试这个：

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

---

这不像上面的Nikko Reyes示例那样流畅，但它在您提供的代码中工作，以显示与toggle一起使用的

complete

函数以及

.not（）

jQuery命令。我知道我做得更好，但我只是工作了8个多小时；）JSFIDLE的内容如下：

---

这不像上面的Nikko Reyes示例那样流畅，但它在您提供的代码中工作，以显示与toggle一起使用的

complete

函数以及

.not（）

jQuery命令。我知道我做得更好，但我只是工作了8个多小时；）JSFIDLE的内容如下：

---

每个页面的ID都应该是唯一的。不要在不同的元素上重复使用相同的ID。请始终在问题中包含相关代码。代码在JSFIDLE上。@JakeGould是的，它应该在问题中。因此，它应该独立于其他站点运行。如果互联网的其他部分消失了，那么问题对于其他有类似问题的人来说仍然是有用的。链接是有用的，但一个问题对其他人有用不需要链接。@JosephSilber我知道如何重用ID，但这只是一个展示我问题的快速模型。这不是问题所在。每个页面的ID都应该是唯一的。不要在不同的元素上重复使用相同的ID。请始终在问题中包含相关代码。代码在JSFIDLE上。@JakeGould是的，它应该在问题中。因此，它应该独立于其他站点运行。如果互联网的其他部分消失了，那么问题对于其他有类似问题的人来说仍然是有用的。链接是有用的，但一个问题对其他人有用不需要链接。@JosephSilber我知道如何重用ID，但这只是一个展示我问题的快速模型。这不是问题所在。事实上，这在fiddle中非常有效，但在HTML5样板中不再有效。有什么线索吗？我使用与fiddle相同的jquery和jQueryUI版本。实际上，这在fiddle中非常有效，但在HTML5样板中停止工作。有什么线索吗？我使用与fiddle中相同的jquery和jquery ui版本。

$( "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(); }
    );
});