Question

我对jQuery很新，我正在处理我正在处理的当前项目的问题。

我一直在寻找有类似问题的其他问题，但在他们的情况下，解决方案对我没用。

在此站点上，用户将单击导航列表中的链接，该链接将滑出包含该信息的div。我使用了toggle命令，因为我希望能够通过单击相同的链接来关闭show并隐藏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');
        }
    }); 
});

jQuery重置导航菜单中的切换

0 个答案: