Javascript 打开div并关闭其他div
因此,我有一个部分,我想点击图像,并通过切换classJavascript 打开div并关闭其他div,javascript,jquery,html,performance,css,Javascript,Jquery,Html,Performance,Css,因此,我有一个部分,我想点击图像,并通过切换class来设置打开的。speaker info动画。在上打开。speaker container动画显示高度。speaker info,同时切换class。悬停状态图像的悬停。.fade类也会切换到.speaker info,以更改不透明度。如果单击一个图像并在同一位置将其关闭,则一切正常。但是,当我打开一个图像并单击另一个图像时,一切都会关闭,因此我需要单击两次才能打开另一个图像,而悬停图像将为上一个图像启用 因此,我想打开一个div,然后如果单击
来设置打开的。speaker info
动画。在上打开。speaker container
动画显示高度。speaker info
,同时切换class。悬停状态图像的悬停。.fade
类也会切换到.speaker info
,以更改不透明度。如果单击一个图像并在同一位置将其关闭,则一切正常。但是,当我打开一个图像并单击另一个图像时,一切都会关闭,因此我需要单击两次才能打开另一个图像,而悬停图像将为上一个图像启用
因此,我想打开一个div,然后如果单击另一个图像,则全部关闭,最近的一个打开。。我一直在兜圈子,想找出最好的办法。。但我总是碰壁
通过切换css类来创建打开/关闭和悬停,我基本上触发了一切
这是我的密码
此外,我正在寻找关于如何使我的代码更灵活、更高效的意见,有时我觉得我写的东西太多了,我可以用更少的几行来做同样的事情
谢谢
<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 --}
我建议您可以使用JQuery来实现您想要实现的功能。以下是供您参考的链接:。我希望有帮助。谢谢
$('.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');
});