Javascript angularjs1以不同内容折叠同一窗格_Javascript_Jquery_Html_Angularjs_Css

Javascript angularjs1以不同内容折叠同一窗格

javascript jquery html angularjs css

Javascript angularjs1以不同内容折叠同一窗格,javascript,jquery,html,angularjs,css,Javascript,Jquery,Html,Angularjs,Css,嘿，伙计们，我正在尝试创建一个可折叠的面板：所以应该有面板标题和面板主体来显示内容。单击时的行为是，当按下按钮时，内容将塌陷，如果单击同一按钮，内容将关闭。如果单击第二个按钮，将折叠第二个按钮的内容，第一个按钮折叠关闭。基本上应该像一个可折叠的面板（引导）一样工作，但只开发角度。我已经这样做了，但我是初学者与角度，所以如果你能帮助我 <body ng-app="app"> <div ng-controller="Test" class="container">

嘿，伙计们，我正在尝试创建一个可折叠的面板：所以应该有面板标题和面板主体来显示内容。单击时的行为是，当按下按钮时，内容将塌陷，如果单击同一按钮，内容将关闭。如果单击第二个按钮，将折叠第二个按钮的内容，第一个按钮折叠关闭。基本上应该像一个可折叠的面板（引导）一样工作，但只开发角度。我已经这样做了，但我是初学者与角度，所以如果你能帮助我

<body ng-app="app">
  <div ng-controller="Test" class="container">
  <div class="custom">
    <button ng-click="show = 1" class="btn">collapse 1</button>
    <button ng-click="show = 2" class="btn">Collapse 2</button>
      <div class="form-group" ng-show="show==1">
      <div class="sec">show 1</div>
    </div>
    <div class="form-group" ng-show="show==2">
      <div class="sec">show 2</div>
    </div>
    <div class="form-group" ng-show="show==3">
    </div>
  </div>
  </div>
</body>


崩溃1
崩溃2
显示1
表演2

因此，这里有一个更新版本，应该能够满足您所寻找的要求。虽然有一些变化，但似乎起了作用。它不使用引导，但需要为动画设置ng动画

我在表单组元素周围放置了一个包装器，并将

ng show

更改为

ng if

//html
<button ng-click="showDiv(1)" class="btn">collapse 1</button>
<button ng-click="showDiv(2)" class="btn">Collapse 2</button>

<div class="sec-wrp" ng-if="show === 1">
    <div class="form-group" >
      <div class="sec">show 1</div>
    </div>
</div>

 <div class="sec-wrp" ng-if="show === 2">
    <div class="form-group" >
      <div class="sec">show 2</div>
    </div>
</div>

<div class="form-group" ng-if="show==3" >
</div>

1秒的

$timeout

值对应于动画的过渡时间，即，允许1秒动画在css中完成1秒的等待时间，该css使用ng enter、ng leave而不是关键帧。如果要在此处调整转换时间，请确保还调整了$timeout

//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
  padding: 20px;
  border: 1px solid orangered;
  background: orange;
  height: 100px;
  z-index: 1;
}

.sec-wrp{
  overflow: hidden;
  transition: all ease 1s;
}

.sec-wrp.ng-enter{
  opacity: 0;
  height: 0;
}

.sec-wrp.ng-enter.ng-enter-active{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave.ng-leave-active{
  opacity: 0;
  height: 0;
}

希望这能有所帮助。

我看到您注意到了bootstrap和angular。我能提出建议吗？@Giovani Vercauteren不可能，只是棱角分明……很乐意帮忙：）

//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
  padding: 20px;
  border: 1px solid orangered;
  background: orange;
  height: 100px;
  z-index: 1;
}

.sec-wrp{
  overflow: hidden;
  transition: all ease 1s;
}

.sec-wrp.ng-enter{
  opacity: 0;
  height: 0;
}

.sec-wrp.ng-enter.ng-enter-active{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave{
  opacity: 1;
  height: 100px;
}

.sec-wrp.ng-leave.ng-leave-active{
  opacity: 0;
  height: 0;
}