1

私はjQueryを初めて使用し、現在取り組んでいるプロジェクトに問題があります。

同様の問題に関する他の質問を見てきましたが、その場合、解決策がうまくいきませんでした。

このサイトで、ユーザーはナビゲーション リストのリンクをクリックすると、情報を含む div がスライドします。同じリンクをクリックして表示を閉じてdivを非表示にしたいので、トグルコマンドを使用しました。また、別のリンクをクリックしてアクティブなdivを非表示にしたいので、現在はうまく機能しています。問題は、別のリンクをクリックしてコンテンツを非表示にするときに、トグルをリセットするために以前のリンクをダブルクリックする必要があることです。

ユーザーがダブルクリックする必要がないように、このトグルをリセットするにはどうすればよいですか?

ここにサイトへのリンクがありますwww.RickPatinoPhotography.com

私のコード:

//Slide Bio Div
    $('#showBio').toggle(function() {
            //shows Bio div
        $('#bio').animate({ marginLeft: '+=1316px'}, 500);
            //hides other divs if showing
        $('#work').animate({ marginLeft: '0px'}, 500);
        $('#contact').animate({ marginLeft: '0px'}, 500);
    }, function () {
            //returns Bio div to default state      
        $('#bio').animate({ marginLeft: '0px'}, 500);
    });

//Slide Work Div
    $('#showWork').toggle(function() {
            //shows Work div
        $('#work').animate({ marginLeft: '+=1316px'}, 500);
            //hides other divs if showing
        $('#bio').animate({ marginLeft: '0px'}, 500);
        $('#contact').animate({ marginLeft: '0px'}, 500);
            //returns Contact div to default state  
        }, function () {
        $('#work').animate({ marginLeft: '0px'}, 500);
    }); 

//Slide Contact Div
    $('#showContact').toggle(function() {
            //shows Contact div
        $('#contact').animate({ marginLeft: '+=1316px'}, 500);
            //hides other divs if showing
        $('#work').animate({ marginLeft: '0px'}, 500);
        $('#bio').animate({ marginLeft: '0px'}, 500);
            //returns Contact div to default state  
    }, function () {
        $('#contact').animate({ marginLeft: '0px'}, 500);
    }); 
});

編集: 解決策を思い付くことができました。チャンピオンのように機能する if/else ステートメントと共に基本的な .click 関数を作成することができました。見てくれてありがとう。

新しいコード: 

    //Slide Bio Div
    $('#showBio a').click(function() {
            //shows Bio div
        if ($('#bio').css("marginLeft") == "1316px"){
            $('#bio').animate({ marginLeft: '0px'}, 500);
        } else {
            $('#bio').animate({ marginLeft: '+=1316px'}, 500);
            //hides other divs if showing
            $('#work, #contact').animate({ marginLeft: '0px'}, 500);        
            $('#showBio a').addClass('activePage');
            $('#showWork a, #showContact a').removeClass('activePage');
            $("#showBio li, #showBio a").click(false);
        }
    });

//Slide Work Div
    $('#showWork a').click(function() {
            //shows Bio div
        if ($('#work').css("marginLeft") == "1316px"){
            $('#work').animate({ marginLeft: '0px'}, 500);
        } else {
            $('#work').animate({ marginLeft: '+=1316px'}, 500);
                //hides other divs if showing
            $('#bio, #contact').animate({ marginLeft: '0px'}, 500);
            $('#showWork a').addClass('activePage');
            $('#showBio a, #showContact a').removeClass('activePage');
        }
    }); 

//Slide Contact Div
    $('#showContact a').click(function() {
                //shows Bio div
        if ($('#contact').css("marginLeft") == "1316px"){
            $('#contact').animate({ marginLeft: '0px'}, 500);
        } else {
            $('#contact').animate({ marginLeft: '+=1316px'}, 500);
                //hides other divs if showing
            $('#work, #bio').animate({ marginLeft: '0px'}, 500);
            $('#showContent a').addClass('activePage');
            $('#showWork a, #showBio a').removeClass('activePage');
        }
    }); 
});
4

0 に答える 0