添加另一个div

Question

你好，我这里有一个使用jquery的hide / toggle div。我想添加另一个div class="sidebar-toggle"。

下面是侧边栏打开和关闭的照片。蓝色div是我要添加的class="sidebar-toggle"，class="sidebar-toggle"是隐藏/切换div的链接。

这是我当前的输出http://jsfiddle.net/a3n7p/

侧边栏切换打开

侧边栏切换关闭

Answer 1

Solution

现在，这是基于您在上面进行的讨论以及您提供的预期图像。

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

注意：只需在z-index:3;上使用.sidebar-toggle即可将其全部点击。

<强> CSS

这已添加到.sidebar-toggle类。

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

<强>的jQuery

也使用了一些jQuery，例如，这是一个片段。 else { }与0px;

相同

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

Answer 2

所以，我不知道你的造型是做什么的，但是我感到很沮丧，并且想到了这一点。希望你可以使用它。

查看此处：http://jsfiddle.net/a3n7p/15/

HTML

<div id="header"></div>

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

CSS

* {
    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;
}

JS：

$(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;
    }
  });
});

Answer 3

检查一下。我希望这是你想要的。

<强> Updated Fiddle

的变化：

<强> HTML

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

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

<强> CSS

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

JQuery - 添加了此内容。

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