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

••••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••••••••••••••••••••• 的修改•••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••••••••••••••••••

事实证明，由于动画是通过CSS提取的，所以根本不需要Javascript：

FIDDLE

我认为Javascript正在进行崩溃/扩展效果，但没有，仅限CSS。我得到了我的意图但是由于我重复使用网上找到的代码，我仍然想知道这种效果究竟是如何实现的 - 所以我可以自己做，而不是寻找已经完成的事情。

Answer 1

试试这个：

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

<强> FIDDLE

您可能不需要蓝色区域。

Answer 2

您已通过data attribute data-toggle="collapse"和data-target启用了展开事件/功能。包括s all you needed when you have bootstrap.js`。

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

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

您可以阅读有关此here的更多信息。

Answer 3

我已更新您的Fiddle。

我已将您的JS更改为

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

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

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

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

Answer 4

试试这个 fiddle

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

问题用jQuery切换div

4 个答案: