Question

所以我有一个部分，我想点击图片并通过在.speaker-info上切换课程.open来设置.speaker-container动画，以设置高度动画以显示{{1同时切换类.speaker-info以获取悬停状态图像。 .hover课程也会切换到.fade以更改不透明度。如果我点击一个图像并用相同的位置关闭它，我的一切工作正常，但当我打开一个并单击另一个图像时，一切都关闭，所以我需要两次点击才能打开另一个图像，并且悬停图像指示为上一张图片。

所以我想打开一个div然后如果另一个图像被点击，所有关闭，最近的一个打开..我一直在四处寻找最好的方法来做这个...但我保持撞墙。

我基本上是通过切换css类来创建打开/关闭和悬停来触发所有内容。

这是我的代码。

另外，我正在寻找关于如何使我的代码更灵活，更高效的意见，有时我觉得我写的很多，我可以用更少的几行来做同样的事情。

谢谢！

.speaker-info

Javascript代码

<section id="speakers">
 <div class="container">
  <div class="row">
   <div class='speaker-container'>
    <div class="span3 offset1" id="{row_index}">
      <div class="speaker-img">
       <img src="{speaker_image}" alt="{speaker_name}" class="hover">
        <img src="{speaker_hover}" alt="{speaker_name}">
      </div>
        <h4>{speaker_name}</h4>
      </div>
      <div class="speaker-info">
        <button class="close-speaker">Close</button>
        <h3>{speaker_name}{if speaker_title}, {speaker_title}{/if}</h3>
        <p>{speaker_bio}</p>
      </div>
   </div>             
  </div>
 </div>
</section> {!-- /End Speakers --}

Answer 1

我建议您可以将JQuery用于您想要的功能。以下是供您参考的链接：JQuery Accordion。我希望它有所帮助。谢谢！

打开div并关闭其他人

1 个答案: