Question

上创建一个像这样的侧栏

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

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

提前感谢所有

Answer 1

假设您在点击时显示的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);
   });
});

这可能有所帮助。

由于

Answer 2

jsfiddle是here

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

HTML：

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

CSS：

#box {
    position:fixed;
    top: 20px;
    left: 0;
    width: 200px;
    height: 400px;
}
#opener {
    position: relative;
    float: right;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #000;
    overflow: hidden;
}
#message {
    float: left;
    overflow: hidden;
    background: #f00;
    width: 160px;
}

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，这样您就不需要使用硬编码值。

div的外观一面

2 个答案: