Jquery div的外观侧

我想在这个网站上创建一个这样的边栏

按“电子邮件图标”实际上，它具有“我想要的效果”。 我对jquery知之甚少，因此无法达到“目标”

我希望你们中的一些人能帮助我

---

提前感谢所有人说你的div将在点击时显示，宽度为300px。您的div css必须至少包含两个属性

.div1 {
  position:fixed;
  top: 5%; // Use whatever you want
  width: 300px;
  left: -300px; // The width of your div, may have to change slightly based on your design.
}

现在点击任何图标，如id icon1

$(document).ready(function () {
   $("#icon1").click(function () {
       var left = parseInt($(".div1").css('left')) < 0 ? 0 : '-300px';

       $(".div1").animate({left: left }, 1000);
   });
});

$（文档）.ready（函数（）{
$（“#icon1”）。单击（函数（）{
var left=parseInt（$（“.div1”）.css（'left'））<0？0:'-300px'；
$（“.div1”）.animate（{left:left}，1000）；
});
});

这可能会有所帮助

谢谢

JSFIDLE是

我使用了.animate（）来切换框的宽度

HTML:

<div id="box">
    <div id="opener">Opener</div>
    <div id="message">This is the message</div>
</div>

jQuery：

$(document).ready(function () {

    $("#box").css("width", "40px");
    $("#message").css("width", "0px");

    var show = 0;

    $("#opener").click(function () {
        if (show === 0) {
            $("#box").animate({
                width: '200px'
            });
            $("#message").animate({
                width: '160px'
            });
            show = 1;
        } else {
            $("#box").animate({
                width: '40px'
            });
            $("#message").animate({
                width: '0px'
            });
            show = 0;
        }
    });
});

---

您可以随时概括jQuery，这样就不需要使用硬编码的值。

它似乎在使用常规幻灯片。当您想要破坏网站布局时，首先检查其源代码中是否有正在使用的javascript库和样式表。

$(document).ready(function () {

    $("#box").css("width", "40px");
    $("#message").css("width", "0px");

    var show = 0;

    $("#opener").click(function () {
        if (show === 0) {
            $("#box").animate({
                width: '200px'
            });
            $("#message").animate({
                width: '160px'
            });
            show = 1;
        } else {
            $("#box").animate({
                width: '40px'
            });
            $("#message").animate({
                width: '0px'
            });
            show = 0;
        }
    });
});