使用jQuery切换div的问题

Question

我有一个隐藏区域，该区域显示单击红色侧栏时的情况。 当我再次单击红色侧栏时，我希望它隐藏。

我在隐藏区域内放置了一个蓝色条，该蓝色条在单击时隐藏了可折叠区域。 我希望红色条可以同时显示和隐藏可折叠区域。

HTML ：

<div class="frame">
    <div id="menu" class="menu nav-collapse collapse width aux">
        <div class="collapse-inner">
            <div id="left-collapser"></div>
        </div>
    </div>
    <div class="view aux2">
        <div id="right-collapser" data-toggle="collapse" data-target="#menu"></div>
    </div>
</div>

的CSS

#left-collapser {
    width: 20px;
    height: 100%;
    float: right;
    background-color: lightblue;
}
#right-collapser {
    width: 20px;
    height: 100%;
    float: left;
    background-color: red;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

}

.aux {
    border: 1px solid red;
    background-color: yellow;
}
.aux2 {
    border: 1px solid blue;
    background-color: lightgreen;
}
 body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  .frame {
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;

    .menu {
      height:100%;
      /* background-color: #3D6AA2; */

      &.collapse {
        float:left;
        height: 100% !important;
        width: auto;
      }

      &.collapse.height {
        position: relative;
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.35s ease;
        -moz-transition: height 0.35s ease;
        -o-transition: height 0.35s ease;
        transition: height 0.35s ease;
      }

      &.collapse.width {
        position: relative;
        width: 0;
        overflow: hidden;
        -webkit-transition: width 0.35s ease;
        -moz-transition: width 0.35s ease;
        -o-transition: width 0.35s ease;
        transition: width 0.35s ease;
      }

      &.collapse.in.width {
        width: auto;
      }

      &.collapse.in.height {
        height: auto;
      }

      .collapse-inner {
        position: relative;        
        width: 250px;
        height: 100%;
      }

    }
    .view {
      width: 50%;
      height: 100%;
      overflow: hidden;

    }
  }
}

Java脚本

$("#left-collapser").click(function (e) {
    $('#menu').collapse('hide');
});

$("#right-collapser").click(function (e) {
    $('#menu').collapse('show');
});

这是小提琴

••••••••••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••• 编辑 ••••••••••••••• ••••••••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••••••••••••••

事实证明，根本不需要Javascript，因为动画是通过CSS提取的：

小提琴

我以为JavaScript正在执行折叠/展开效果，但没有，仅CSS。 我达到了预期的目的，但是由于我重复使用了在网上找到的代码，因此我仍然想知道这种效果是如何实现的-因此我可以自己做，而不用寻找已经完成的事情。

Answer 1

尝试这个：

$("#left-collapser").click(function (e) {
    $('#menu').toggle('collapse');
});

小提琴

您可能不需要蓝色区域。

Answer 2

您已经通过data attribute data-toggle="collapse"和一个data-target启用了折叠事件/功能。 包含bootstrap.js`就是s all you needed when you have 。

您也可以通过javascript手动触发它，如下所示：

$('#menu').collapse('toggle')

您可以在此处了解更多信息。

Answer 3

我已经更新了你的小提琴 。

我已将您的JS更改为

$("#left-collapser").click(function (e) {
    $('#menu').collapse('hide');
});

$("#left-collapser").click(function (e) {
    $('#menu').collapse('show');
});

现在，您可以通过单击红色区域来显示/隐藏。

如其他答案中所述，您可以摆脱蓝色区域。

Answer 4

试试这个小提琴

$("#left-collapser").click(function (e) {
    $('#menu').toggle('collapse');
});