3

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

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

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

2 回答 2

2

在所有要关闭的元素上放置一个通用类。将它们全部关闭，除了您单击的那个，然后打开您单击的那个。当您再次关闭它们时，已经关闭的那些将不会执行任何操作。

假设您将类添加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 状态必须与之匹配。

于 2012-08-07T07:16:44.220 回答
0

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

于 2012-08-07T07:17:27.610 回答