Javascript 在jQuery中打开一个打开的元素时，如何关闭其他打开的元素？

我知道。标题有点……难以理解。我会看看我能做些什么来帮助你理解它

基本上，我为我的个人网站所做的是作为网页主体的主导航。单击链接时，会加载一些隐藏内容，如下所示：

    $(document).ready(function(){
    $('li a#about-toggle').click(function(){
        $('li#about').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
    $('li a#portfolio-toggle').click(function(){
        $('li#portfolio').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
    $('li a#resume-toggle').click(function(){
        $('li#resume').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
    $('li a#contact-toggle').click(function(){
        $('li#contactme').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});

这目前允许网站的访问者打开所有元素，这不仅在视觉上令人不快，而且会产生一些bug，但大部分都在视觉上令人不快

我的问题是，在我所拥有的代码尽可能老练的情况下，我该如何使它们一次只能打开一个

提前感谢,， 雅各布

编辑：

---

在所有要关闭的元素上放置一个公共类。将它们全部关闭（单击的除外），然后打开单击的。当您再次关闭已关闭的对象时，它们将不会起任何作用

假设您为每个元素添加了类

触发器

，那么您可以这样做，并将jQuery缩短为所有元素的一个块：

$(document).ready(function(){
    $('#about-toggle, #portfolio-toggle, #resume-toggle, #contact-toggle').click(function(){
        // get the clicked on id and convert it to shortened form
        var id = this.id.replace(/\-.*$/, "");
        var item = $("#" + id);
        // toggle others that are open and toggle the current one
        $(".togglers").not(".hidden").add(item).animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});

或者，如果您没有将公共类放在它们上面，那么您只需将它们全部列出：

$(document).ready(function(){
    $('#about-toggle, #portfolio-toggle, #resume-toggle, #contact-toggle').click(function(){
        // get the clicked on id and convert it to shortened form
        var id = this.id.replace(/\-.*$/, "");
        var item = $("#" + id);
        // toggle others that are open and toggle the current one
        $('#about, #portfolio, #resume, #contact').not(".hidden").add(item).animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});

---

此实现假定

.hidden

类应用于任何切换为关闭并从打开的项目中删除的项目，初始HTML状态必须与之匹配。

在“单击”时，首先隐藏所有元素（例如$（'li'）.hide（）；），然后显示要显示的元素。

嘿，感谢您的回复。然而，使用该代码，它也隐藏了主链接。你知道如何隐藏隐藏的内容吗？这是我的HTML：它就是一个例子。通过将要隐藏的元素添加到类中，然后隐藏该类，对这些元素进行分组。此外，如果您根据元素的ID选择元素，则不需要其他DOM选择器。长话短说：（'li a#contact toggle'）==（'#contact toggle'）。再次感谢您，您能否澄清“对元素进行分组”，以及您的意思的一个简短示例？元素组=我们所讨论的jQuery脚本要隐藏/显示的所有元素。可能它看起来像是某个东西

另一个东西

它现在实际上是一个组（DOM元素组），但您需要一个类来隐藏它们，而不是其他文档元素。因此，您只需将类添加到ul元素

。现在，您的“隐藏”脚本如下所示：

$（'.menu li'）.hide（）。我用我从你的回复中得到的一些东西编辑了我的原始帖子。但它仍然不起作用。有什么想法吗\嘿，谢谢你。我添加了它并注释掉了我的旧代码。但这就是我的代码所做的。让它们全部打开。知道为什么吗？再次感谢，杰克，谢谢你添加了那个编辑，但那也没用。让列表做和以前一样的事情。我不确定你是如何关闭其他的类的-我认为仅仅添加“隐藏”类就足够了，但可能不行。我修改了我的答案，试图模仿你的做法。再次感谢，但这允许第一个答案被打开、关闭，并且没有一个被打开。你知道为什么吗？：/你可以在：@JacobAndersen上查看它——当你没有在你的问题中提供相关的HTML或者提供一个jsFiddle示例时，这就是我所能做的猜测。这个概念是为了得到一个选择器和所有其他的选择器。关于你想要什么，我最后猜了一下，修改了我的答案。
$(document).ready(function(){
    $('#about-toggle, #portfolio-toggle, #resume-toggle, #contact-toggle').click(function(){
        // get the clicked on id and convert it to shortened form
        var id = this.id.replace(/\-.*$/, "");
        var item = $("#" + id);
        // toggle others that are open and toggle the current one
        $('#about, #portfolio, #resume, #contact').not(".hidden").add(item).animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});