Question

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

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

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

这目前允许网站的访问者打开所有元素，这不仅在视觉上令人不悦，而且会产生一些错误，但大多数在视觉上令人不悦。

我的问题是，尽管我保持尽可能的代码，我怎么能这样做，所以他们一次只能打开一个？

提前致谢，雅各布

编辑：

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

Answer 1

在要关闭的所有元素上放置一个公共类。除了你点击的那个之外全部关闭它们然后打开你点击的那个。已经关闭的那些在你再次关闭它们时什么都不做。

假设您为每个类添加了类togglers，那么您可以执行此操作并将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状态必须与之匹配。

Answer 2

在“点击”上首先隐藏所有元素（例如$（'li'）。hide（）;），然后显示您想要显示的元素。

如何在jQuery中打开其他开放元素？

2 个答案: