Jquery 添加另一个div

您好，我这里有一个使用jquery的隐藏/切换div。我想添加另一个div

class=“sidebar toggle”

下面是侧边栏打开和关闭的照片。蓝色div是我要添加的

class=“sidebar toggle”

，

class=“sidebar toggle”

是隐藏/切换div的链接

这是我当前的输出

侧边栏开关打开

侧边栏切换关闭

现在，这是基于您上面所做的讨论，以及您所展示的预期图像

我使用了一些CSS和jQuery，尽管有更好的方法来实现这一点

注：只需使用

z-index:3

打开

。侧边栏切换

以使其可单击，所有这些

CSS

    .sidebar-toggle {
      top: 0;
      left: 220px;
      width: 20px;
      height: 100%;
      background: blue;
      float:left;
      position:absolute;
      z-index:10;
}

这已添加到

.sidebar toggle

类中

left:33%;
top:0%;
position:fixed;
z-index:3;

jQuery

还使用了一些jQuery，例如，下面是一个代码片段。

else{}

与

0px相同

 $('.sidebar-toggle').animate({
        marginLeft: "-220px",
        opacity: "1"
      }, 'fast');

看看这个。我希望这是你需要的


变化：

HTML

<div class="framecontentLeft">
  <div class="innertube">

  </div>
</div>
<div class="sidebar-toggle"></div> <!--repositioned slidebar-->

JQuery-添加了这个

if (sidebarStatus == false) {
        $(this).animate({
            marginLeft: "-220px"},'fast');
}else{
        $(this).animate({
            marginLeft: "-220px"},'fast');
}

所以，我不知道你在做什么，但我在这件事上遇到了挫折，并想出了这个主意。希望您能使用它。

在此处查看：
HTML
JS:
您想添加到哪里it@ArunPJohny就像照片中的那个蓝色的“添加一个div”很普通。想详细说明吗？你想什么时候添加？我更新了我的问题。对不起，您应该在问题中包含您的代码。当未来的用户正在寻找类似的东西，但是JSFIDLE已经死了，会发生什么呢？我正在编辑。冷静点，兄弟：）。你是对的。正如你所提到的，我总是包含考虑这些因素的代码。@AliGajani已经足够接近了，但是为什么只有顶部部分。边栏切换具有隐藏/切换功能？@user3097736因为#maincontent掩盖了边栏，阻止了点击，修复了这个问题。哈哈，这绝对是一个不错的答案。我决定重新映射他的CSS。。。因为那是肮脏的@user3097736这基本上是复制的作品；你应该接受另一个答案。这与另一个答案有何不同？@AliGajani你刚才回答得比我早，但没有。@Daedalus是的，我会的。如果你觉得这是一个被接受的答案，请在向上/向下投票旁边用绿色复选标记接受它。
<div id="header"></div>

<div id="leftNav">
    <div id="toggler"></div>
</div>

* {
    margin:0; padding:0;
}
#header {
    background:green;
    width:100%;
    height:100px;
}
#leftNav {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    background:#CCC;
    width:220px;
}
#toggler {
    position:relative;
    width:20px;
    height:100%;
    background:#111;
    margin-left:220px;
}

$(document).ready(function() {
  var sidebarStatus = false;
  $('#toggler').click(function() {
     if (sidebarStatus == false) {
      $('#leftNav').animate({
        marginLeft: "-220px",
        opacity: "1"
      }, 'fast');
      sidebarStatus = true;
    }
    else {
      $('#leftNav').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'fast');
      sidebarStatus = false;
    }
  });
});