javascript - 如何用按钮在不同的div中滑动

Question

在我的代码中，我有 2 个面板。下面板有 3 个按钮，按下每个按钮必须在上面板加载不同的数据。

假设我按下下部面板中的按钮 1，div 编号 1.1、1.2、1.3 将滑入。如果我按下按钮 2，div 2.1、2.2、2.3、2.4 将加载。

这是我的设置代码: DEMO

.panel {
  width: 300px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 13px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

<div class="panel">
  <div class="panelTop">
    Dependant Buttons:
    <!-- Side1 -->
    <div>1.1</div>
    <div>1.2</div>
    <div>1.3</div>

    <!-- Side2
    <div>2.1</div>
    <div>2.2</div>
    <div>2.3</div> -->

    <!-- Side3 
    <div>3.1</div>
    <div>3.2</div>
    <div>3.3</div> -->
  </div>
  <div class="panelBottom">
    Main Buttons:
    <div class="btn1">1</div>
    <div class="btn2">2</div>
    <div class="btn3">3</div>
  </div>
</div>

每个 div 都有其独特的类，所以我不确定是否可以使用 jQuery 中的数组或 CSS 中的 visibility:hidden 来实现它。

有什么想法吗？!

Answer 1

你需要这样的东西吗？

编辑: Fiddle

*您唯一需要做的就是CSS“操作”(根本不需要JS)。

我这样写:

html

<div class="panel">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input id="box-1" name="trigger" type="radio">
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input id="box-2" name="trigger" type="radio">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input id="box-3" name="trigger" type="radio">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label for="box-1" class="btn1">1</label>
    <label for="box-2" class="btn2">2</label>
    <label for="box-3" class="btn3">3</label>
  </div>
</div>

CSS

input[type="radio"]{
  position: absolute;
  opacity: 0;
}

.panelTop > div {
  position: absolute;
  top: 15px;
  right: 0;
}

.panelTop > div div {
  opacity: 0;
  transition: ease .3s;
  transform: translate(-150%, 0)
}

.panelTop > div input[type="radio"]:checked ~ div {
   opacity: 1;
   transform: translate(0%, 0)
}

.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}

.panel > .panelTop {
  position: relative;
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}

.panel > .panelBottom {
  width: 100%;
  height: 50px;
}

.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}

.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

您可以看到每个 label 标签在您的 radio 输入类型的 id 内都有 for 属性。

label 标签“触发”您的 radio 输入，通过 CSS 选择器，我们可以更改其后面的 div。

.panelTop > div input[type="radio"]:checked ~ div

此 CSS 选择器代表点击后发生的情况，因此您可以根据需要进行更改。

input[type="radio"]:checked ~ div - 在检查 radio 输入类型后获取每个 div。

希望这个例子对您有所帮助。