javascript - 使用 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;

    }
  }
}

Javascript

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

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

这是Fiddle

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

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

FIDDLE

我以为 Javascript 会产生折叠/展开效果，但不是，只有 CSS。我得到了我想要的，但由于我重复使用了我在网上找到的代码，我仍然想知道这种效果究竟是如何实现的 - 所以我可以自己做而不是寻找已经完成的东西。

Answer 1

试试这个:

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

FIDDLE

您可能不需要蓝色区域。