Question

我又来了，淹没在我的小说中。我一直在寻找HOURS来解决这个问题！我完全是jQuery / Javascript的初学者，所以我需要一些帮助。

这就是我想要做的事情：

我有一个导航栏，当你点击一个按钮时，它会隐藏它，然后当你再次点击时，它会将其切换回来，这样导航栏就会再次显示。我用jQuery做了这个，它运行得很好。

现在发生的是，当您单击该按钮并隐藏导航栏时，我希望div内容向左滑动几个像素并占据整个宽度（从而增大一点并填满无用的空白，我特别希望这适用于移动用户）。再次，这完美地运作。

然而......如果我点击着名的按钮，导航栏会返回，但div内容仍然在左侧，稍微被导航栏隐藏。虽然我想要在导航回来时，div内容又回到原来的位置和宽度。

因此，我尝试了许多不同的代码，但似乎没有任何作用！它要么保持不动，要么就是不做任何事情。虽然有趣和有趣，但几个小时后它会变得令人沮丧。

以下是我尝试过的一些事情：

-toggle

-animate /停止

-if / ELSE

-Get x position

我没有保存任何jQuery / javascript代码，但如果需要，我将提供一个代码段。我不想提供任何代码的原因是因为它太疯狂而且令人困惑和复杂！

因此，非常感谢您的帮助！ =）

最后一件事：请再次注意，您正在和初学者交谈！所以，请你非常具体和有条不紊（如果可能的话，保持简单^^'），我非常感谢，因为我一直在Google和stackoverflow上搜索数小时。

哦，我忘记了！我的单位不使用像素。为了响应，我使用“％”...我不知道这是否真的适用于jQuery ...启发我！

** ALRIGHT！这是我非常复杂的小提琴......不知何故，jQuery在我的小提琴中不起作用，但它正在我的浏览器上工作。

<html>Some super random code because it won't let me post fiddle without it but all my code is in the fiddle...</html>

https://jsfiddle.net/czcvucxL/1/ **

Answer 1

你可以完成从.content1而不是使用jquery

切换类

Demo

$(document).ready(function(){
    $("#CharaCircle a").click(function(){
        $("#Header").animate({width:'toggle'},350);
        $("#Sidebar, #Sidebar ul li").animate({height:'toggle'},250);


        $(".content1").toggleClass("fullwidth");
        return false;
    });

});

添加此课程

.fullwidth {
    width: 95%;
    left: 0;
    margin-left: 0;
}

将这些添加到.content1，以便div从左边的10％开始并允许动画（transition）

.content1{
    left: 10%;
    -webkit-transition: left 0.2s ease-in, width 0.2s ease-in;
            transition: left 0.2s ease-in, width 0.2s ease-in;
}

编辑：如果你只想用jquery Demo

$(document).ready(function () {
    $("#CharaCircle a").click(function () {
        $("#Header").animate({
            width: 'toggle'
        }, 350).toggleClass("hidden");

        $("#Sidebar, #Sidebar ul li").animate({
            height: 'toggle'
        }, 250);

        var properties;
        var $content = $(".content1");

        //build your set of properties width and marginleft 
        //are the ones you need to change
        if ($("#Header").hasClass("hidden")) {
            properties = {
                width: "100%",
                marginLeft: "0"
            };
        } else {
            properties = {
                width: "62%",
                marginLeft: "19.4%"
            };
        }

        $content.animate(properties, 250);
        return false;
    });
});

jQuery：点击时将div移到左侧并将其恢复到原始位置（使用相同的按钮）

1 个答案: