3

知っている。タイトルがちょっと……わかりにくかったです。あなたがそれを理解するのを助けるために私ができることを見ていきます。

基本的に、私が個人サイトのために行ったことは、Web ページの本体としてのメイン ナビゲーションです。リンクがクリックされると、次のような非表示のコンテンツが読み込まれます。

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

これにより、現在、Web サイトの訪問者はすべての要素を開くことができます。これは、視覚的に不快であるだけでなく、いくつかのバグを作成しますが、ほとんどの場合、視覚的に不快です.

私の質問は、私が可能な限り無傷のままにしているコードで、一度に 1 つしか開けないようにするにはどうすればよいですか?

前もって感謝します、ジェイコブ

編集：

    $(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 をすべての要素の 1 つのブロックに短縮することもできます。

$(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 に答える