Question

我想巧妙地切换div。不确定用jQuery做最好的（少代码）方法。我所拥有的是一个带有扬声器图像及其名称/标题的页面。然后一个隐藏的div与他们的生物。单击扬声器的图像后，我希望生物显示...我拥有它的方式所有的BIOS出现：[

理想情况下，我希望链接和隐藏的生物相互自动关联，而不是更新ID。举个例子：如果链接1点击显示链接生物的孩子或兄弟（不确定）。这是代码......

<div class="speaker_container clearfix">
    <div class="speaker_img"><a id="speaker1" href="#" class="toggle_me"><img src="127.gif" alt="Speakers" /></a></div>
    <h3>Name</h3>
    <p>Title</p>
    <div class="speaker-bios clearfix">
        <p>Hidden Bio with css display.</p>
    </div>
</div>

<div class="speaker_container clearfix">
    <div class="speaker_img"><a id="speaker2" href="#" class="toggle_me"><img src="123.gif" alt="Speakers" /></a></div>
    <h3>Title of Speaker</h3>
    <p>Alexius Doe Title</p>
    <div class="speaker-bios clearfix">
        <p>Hidden Bio with css display.</p>
    </div>
</div>

提前致谢！

Answer 1

使用：

$('.speaker_container').on('click','.speaker_img',function(){ // it mean on click over '.speacker_img' that is inside each '.speaker_container'
    $(this).siblings('.speaker-bios').toggle("slow"); // it mean will find a sibling of this '.speaker_img' you clicked, called '.speaker-bios' and you toggle it.
});

演示：

http://jsfiddle.net/ZTxg7/

jQuery根据href链接＃或新的bio div切换隐藏的div

1 个答案: