【问题标题】：Adding another div添加另一个 div
【发布时间】：2014-02-03 08:46:43
【问题描述】：

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

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

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

侧边栏切换打开

侧边栏切换关闭

【问题讨论】：

你想在哪里添加它
@ArunPJohny 就像照片中的蓝色一样
"add a div" 非常通用。需要详细说明吗？
你想什么时候添加？
我更新了我的问题。对不起

标签： jquery css

【解决方案1】：

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

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');
}

【讨论】：

@user3097736 这本质上是抄袭作品；你应该接受另一个答案。
这与其他答案有何不同？
@AliGajani 你刚刚回答的比我早，但没有。
@Daedalus 是的，我愿意。

【解决方案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;
    }
  });
});

【讨论】：

如果您认为这是一个可以接受的答案，请在赞成/反对票旁边的绿色复选标记处接受它。

【解决方案3】：

Solution

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

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

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

CSS

这已添加到 .sidebar-toggle 类中。

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

jQuery

还使用了一些 jQuery，例如，这里是一个 sn-p。 else { } 和 0px; 相同

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

【讨论】：

您应该在问题中包含您的代码。当未来的用户正在寻找这样的东西时会发生什么，但 jsfiddle 已经死了？
我正在编辑。放松兄弟:)。你说的对。正如您所提到的，我一直包含考虑这些因素的代码。
@AliGajani 已经足够关闭了，但是为什么只有.sidebar-toggle 的顶部有隐藏/切换功能？
@user3097736 因为#maincontent 覆盖了栏，并阻止点击工作，this edit 解决了这个问题。
大声笑，绝对是一个不错的答案。我决定重新映射他的 CSS...因为那很脏...Fiddle Here