当隐藏的侧面板可见时如何将按钮放在一边

Question

我正在尝试使用通过按钮进入视口的侧面板进行动画处理。

这是加载时的样子

当用户点击两个按钮中的任何一个时，注释面板将像这样滑动可见

这是我目前所拥有的

[3]: https://codepen.io/terenceting/pen/ZqaOJo

谁能帮帮我。这个功能叫什么？

提前致谢

Answer 1

我认为这就是您正在寻找的对吗？面板中的幻灯片，这可以通过 CSS 和容器元素上的一些类操作来实现，试试这个：

https://codepen.io/anon/pen/xyPEZx

我基本上只是在note-wrapper 元素上切换一个名为 active 的类，现在 jquery slide 没有用了，因为 css 和 transiotions 可以完成大部分工作:)

Answer 2

看看这个..让我知道这是你所期望的

https://codepen.io/aflyzer/pen/JmORyG

只需使用 toggleClass 和一些 css

Answer 3

在此之前有一些关于此代码的提示。
HTML 结构：看看“slideDivs”包含您需要的所有组件，我使用 borders 和 colors 以获得更好的视角。
Jquery：它使用状态“onoffBtn”来了解块是否打开。就像我在代码中所说的那样，使用一个在 1 步中执行此操作的函数会更好，但代码更少，但 Snipped 不喜欢带有 jquery xD 的函数。
CSS 的重要部分：

#slideDivs{
  right: 0;
  top: 10px;/*Change it if you need*/
  position: absolute;
}
.comp{
  display:inline-block;
}
.tabs{
  width: 440px;
  float: right;
  height: 11em;
}
.tabs{/*All tabs divs must be "display: none"*/
  display: none;
}
#btnTabs{
  width:40px;
  height:180px;
}
.btnTab{
  transform: rotate(-90deg); /* this rotate the btn text, rest are for other explorers (firefox, IE..)*/
  -webkit-transform: rotate(-90deg);   
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  float:left;
  height: 40px;
  width: 40px;
}
.btnTab:nth-child(2){
  margin-top:2px;
}

希望对您有所帮助，这里是 (https://codepen.io/Alvargon/pen/QZaNmL) codePen 中的代码有一些改进，祝你好运 ;)

/*The "optimal way", is use a function, but the code Snippet doesn't like it XD;
*/
var onOffBtn1 = "off";
var onOffBtn2 = "off";
var exnum = 0;
var num = 0;

$("#btn1").click(function(){
    num = 1;
    switch(onOffBtn1){
      case "off": {
        $("#tab"+exnum).hide("fast"); 
        $("#tab"+num).show("fast");
        onOffBtn2="off"; onOffBtn1="on"; 
        exnum = 1;
        break;
      }
      case "on": {
        $("#tab"+num).hide("fast");
        $("#tab"+exnum).hide("fast");
        onOffBtn2="off"; onOffBtn1="off"; break;
      }
    }    
  });

$("#btn2").click(function(){
    num = 2;
    switch(onOffBtn2){
      case "off": {
        $("#tab"+exnum).hide("fast"); 
        $("#tab"+num).show("fast");
        onOffBtn1="off";onOffBtn2="on"; 
        exnum = 2;
        break;
      }
      case "on": {
        $("#tab"+num).hide("fast");
        $("#tab"+exnum).hide("fast");
        onOffBtn2="off";onOffBtn1="off"; break;
      }
    }    
  });

#mainDiv{
  border: 1px solid red;
  padding: 10px;
}

#slideDivs{
  background-color:#add8e680;
  border: 4px dotted blue;
  /*width: 500px;*/
  right: 0;
  top: 10px;
  position: absolute;
}
.comp{
  display:inline-block;
}
.tabs{
  border: 3px double orange;
  width: 440px;
  float: right;
  height: 11em;
}
.tabs{
  display: none;
}
#btnTabs{
  width:40px;
  height:180px;
  border: 3px solid darkgreen;
}
.btnTab{
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);   
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  float:left;
  height: 40px;
  width: 40px;
}
.btnTab:nth-child(2){
  margin-top:2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainDiv">
  Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu
  <div id="slideDivs">
    <div id="btnTabs" class="comp">
      <button id="btn1" class="btnTab">BTN 1</button>
      <button id="btn2" class="btnTab">BTN 2</button>       </div>
    <div id="tab1" class="tabs comp"><strong>TAB 1</strong><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p></div>
    <div id="tab2" class="tabs comp"><strong>TAB 2</strong><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p></div>  
  </div>
</div>