开放的div和关闭其他

所以我有，我想在图像上单击，并有.speaker-info动画通过.speaker-container切换.open类开放动画的高度部分揭示.speaker-info同时拨动类.hover的悬停状态图片。 .fade类也会切换到.speaker-info以更改不透明度。如果我点击一张图片并用相同的位置关闭它，我就可以正常工作，但是当我打开一张图片并点击另一张图片时，所有图片都会关闭，因此我需要两次点击才能打开另一张图片，并且悬停图片会显示上一张图片。开放的div和关闭其他

所以我想打开一个div，然后如果另一个图像点击，所有关闭和最近的一个打开..我一直在绕圈试图找出最好的方式来做到这一点..但我继续打墙。

我基本上是触发一切，通过切换CSS类来创建开/关和悬停。

这是我的代码。

此外，我正在寻找关于如何使我的代码更灵活，更高效的意见，有时我觉得我写waaay到很少的地方可以做同样的事情。

谢谢！

<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 --}

的Javascript代码

$('.speaker-container').each(function(){ 

    var containerHeight = $(this).height(); 
    $('.speaker-info').css({ 'top' : containerHeight}); 

    }); 

     $('#speakers .span3').on('click', function(){ 
     var containerHeight = $(this).parent('.speaker-container').height(); 
     var h = $(this).next('.speaker-info').height(); 
     var totalHeight = containerHeight + h; 

     $(this).find('.speaker-img').children().toggleClass('hover'); 

     $('#speakers .span3').not($(this).next('.speaker-info')).next('.speaker-info').removeClass('fade'); 

     if (!$('.speaker-info').hasClass('fade') && !$('.speaker-container').hasClass('open')) { 

     $(this).closest('.speaker-container').css({'height' : totalHeight}).addClass('open'); 
     $(this).next('.speaker-info').addClass('fade'); 

     } else { 

     $('.speaker-container').css({'height' : h}).removeClass('open'); 
     $(this).next('.speaker-info').toggleClass('fade'); 
     $('.speaker-info').removeClass('fade'); 
     } 

    }); 

    $('.close-speaker').on('click', function() { 
    var container = $(this).closest('.speaker-info').height(); 
    $(this).closest('.speaker-container').css({'height' : container}).removeClass('open'); 
    $('.speaker-info').removeClass('fade'); 
    });

来源

2013-09-24 PhDeOliveira

我建议你可以使用jQuery你想这样做的功能。以下是供您参考的链接：JQuery Accordion。我希望它有帮助。谢谢！

来源

2013-10-20 17:31:49

开放的div和关闭其他

回答

相关问题