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);
    }); 
});

编辑： 嗯，我能够想出一个解决方案，我能够创建一个基本的 .click 函数以及一个像冠军一样工作的 if/else 语句。感谢大家的关注。

新代码： 

    //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