jQuery隐藏和显示多个元素
我有多个div,包括照片和文本。当用户点击“bio”按钮时,传记文本出现 如果单击图像,我将如何使bio文本显示 如果显示了传记文本,用户单击了不同的图像,我如何才能使之前的传记文本消失?我不希望它滑进滑出,而只是淡入淡出 这是我的jquery:jQuery隐藏和显示多个元素,jquery,html,css,Jquery,Html,Css,我有多个div,包括照片和文本。当用户点击“bio”按钮时,传记文本出现 如果单击图像,我将如何使bio文本显示 如果显示了传记文本,用户单击了不同的图像,我如何才能使之前的传记文本消失?我不希望它滑进滑出,而只是淡入淡出 这是我的jquery: $('.bio-button').click(function () { $(this).siblings('.team-text').toggle(); }); $('.team-text .close').click(function ()
$('.bio-button').click(function () {
$(this).siblings('.team-text').toggle();
});
$('.team-text .close').click(function () {
$(this).parent('.team-text').hide();
});
$('.team-member img, .team-member-minor img').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".team-text").slideUp();
$(this).next('div').slideToggle();
}
});
$('.close').click(function() {
$(this).parent().slideUp();
});
这是我的html
<div id="" class="team-member">
<div class="team-text">
<p>hello this is Billy's text</p>
<div class="close"></div>
</div><!-- .team-text -->
<div class="team-photo">
<img width="437" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/billy.jpg" class="" alt="billy" />
<h2>Billy Senecal</h2>
<p>Producer / Director</p>
</div><!-- .team-photo -->
<div class="bio-button">BIO</div>
<div class="clear"></div>
</div><!-- #team-member -->
<div id="" class="team-member">
<div class="team-text">
<p>THis is Mark's text</p>
<div class="close"></div>
</div><!-- .team-text -->
<div class="team-photo">
<img width="439" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/mark.jpg" class="" alt="mark" />
<h2>Mark Montalto</h2>
<p>Editor / Producer</p>
</div><!-- .team-photo -->
<div class="bio-button">BIO</div>
<div class="clear"></div>
</div><!-- #team-member -->
你好,这是比利的短信
比利·塞内卡尔
制片人/导演
生物
这是马克的课文
马克蒙塔托
编辑/制片人
生物
如果您希望磁贴上的任何位置都能正常工作,以下是指向的链接。:
$('div.team-photo').click(function(){
$(this).parent().find('.team-text').is(':visible').hide();
$(this).siblings('.team-text').toggle();
});
如果您只想添加图片:
$('div.team-photo > img').click(function(){
$(this).parent().parent().find('.team-text').is(':visible').hide();
$(this).parent().siblings('.team-text').toggle();
});
这两个元素都将在显示自己的元素之前隐藏所有其他可见的
.team text
元素,并且在用户再次单击事件时隐藏关联的.team text
元素。如果您希望磁贴上的任何位置工作:
$('div.team-photo').click(function(){
$(this).parent().find('.team-text').is(':visible').hide();
$(this).siblings('.team-text').toggle();
});
如果您只想添加图片:
$('div.team-photo > img').click(function(){
$(this).parent().parent().find('.team-text').is(':visible').hide();
$(this).parent().siblings('.team-text').toggle();
});
这两个元素都将在显示自己的元素之前隐藏所有其他可见的
.team text
元素,如果用户再次单击事件,还可以隐藏相关的.team text
元素。我不完全确定您试图通过布局实现什么,但我认为这可能就是您所希望的jQuery
$('.team-photo, .bio-button').on('click', function(){
$('.team-text').fadeOut();
$(this).prevAll('.team-text:hidden').fadeIn();
});
因为“.team text”元素的默认状态是隐藏的,所以我们只需在每次单击时隐藏它们,然后在fadeIn()上使用“:hidden”过滤器,以防止其在已可见的元素中褪色(这样,如果用户单击两次,我们就可以隐藏互动程序)。我认为令人困惑的是,有两个函数,而第二个函数是有条件运行的。这是一个简短的表达方式:
if ($(this).prevAll('.team-text').css('display') === 'none') {
$(this).prevAll('.team-text').fadeIn();
}
(为可读性而编辑)我不完全确定您试图通过布局实现什么,但我认为就jQuery而言,这可能就是您想要的
$('.team-photo, .bio-button').on('click', function(){
$('.team-text').fadeOut();
$(this).prevAll('.team-text:hidden').fadeIn();
});
因为“.team text”元素的默认状态是隐藏的,所以我们只需在每次单击时隐藏它们,然后在fadeIn()上使用“:hidden”过滤器,以防止其在已可见的元素中褪色(这样,如果用户单击两次,我们就可以隐藏互动程序)。我认为令人困惑的是,有两个函数,而第二个函数是有条件运行的。这是一个简短的表达方式:
if ($(this).prevAll('.team-text').css('display') === 'none') {
$(this).prevAll('.team-text').fadeIn();
}
(为可读性而编辑)Malcolm,是的,这就是我要找的!如果你有时间,你介意给我解释一下这段代码吗?特别是最后一个函数?逻辑似乎与我脆弱的头脑相反。马尔科姆,是的,这就是我要找的!如果你有时间,你介意给我解释一下这段代码吗?特别是最后一个函数?这种逻辑似乎与我虚弱的头脑相反。