javascript - 单击 Div A 会触发 Div B 并删除 Div B 的同级

Question

我有一个包含缩略图的开放容器 div。如果用户单击该缩略图 div，则会出现一个具有相同索引的名为 box 的 div。

所以基本上我有以下结构:

<div id="open-container">
  <div class="boxA-open"></div>
  <div class="boxB-open"></div>
  <div class="boxC-open"></div>
</div>

<div class="box">
  <div class="profile"></div>
  <div class="data">
    <h1>Ipsum Lorum</h1>
    <h2>Ipsum Lorum</h2>
    <p>Ipsum Lorum</p>   
  </div>
</div>

<div class="box">
  <div class="profile"></div>
  <div class="data">
    <h1>Ipsum Lorum</h1>
    <h2>Ipsum Lorum</h2>
    <p>Ipsum Lorum</p>   
  </div>
</div>

<div class="box">
  <div class="profile"></div>
  <div class="data">
    <h1>Ipsum Lorum</h1>
    <h2>Ipsum Lorum</h2>
    <p>Ipsum Lorum</p>   
  </div>
</div>

说实话，我还没有尝试过任何东西，因为我不确定如何设置 div 之间所需的连接。

我最初的解决方案是为每个打开盒子的类设置 3 个点击事件，并使用 nth-of-type 来定位盒子。不过，将相同的代码编写 3 次并不是那么优雅。

div 的不透明度设置为 0。如果框变得可见或“将出现”，则将设置为 1。

对于用户 j08691:

$('div.box-open').click(function () {
    var timeline = new TimelineMax({paused:true});
    timeline.to($('.box').eq($(this).index()), 3,  {left:'6%', ease:Back.easeInOut})
    timeline.play();
})

Answer 1

您可以使用以下 jQuery 代码片段来完成此操作:

$('div.box-open').click(function () {
    $('.box').hide().eq($(this).index()).fadeIn();
})

并将容器 div 类更改为 box-open

$('div.box-open').click(function () {
    $('.box').hide().eq($(this).index()).fadeIn();
})

.box {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="open-container">
    <div class="box-open">A</div>
    <div class="box-open">B</div>
    <div class="box-open">C</div>
</div>
<div class="box">
    <div class="profile"></div>
    <div class="data">
         <h1>Ipsum Lorum 1</h1>

         <h2>Ipsum Lorum</h2>

        <p>Ipsum Lorum</p>
    </div>
</div>
<div class="box">
    <div class="profile"></div>
    <div class="data">
         <h1>Ipsum Lorum 2</h1>

         <h2>Ipsum Lorum</h2>

        <p>Ipsum Lorum</p>
    </div>
</div>
<div class="box">
    <div class="profile"></div>
    <div class="data">
         <h1>Ipsum Lorum 3</h1>

         <h2>Ipsum Lorum</h2>

        <p>Ipsum Lorum</p>
    </div>
</div>