单击目标div时,我试图滑动div。我试图仅使用一个函数来操纵所有div,并且试图使用相同的类。
但是,当我单击说div1-divA幻灯片时,然后单击div2-divA下方的divB幻灯片。
我要实现的是在用户单击目标div时仅显示必要的div。
到目前为止,这是我所做的:JSFIDDLE
我的js看起来像这样:
$(document).ready( function() {
$(function(){
$('.divshow').click(function(){
$('.services-info').hide();
$('#div'+$(this).attr('target')).slideToggle();
});
});
});
重复标记:
<div class="horiz">
<div class="webserv1 divshow" target="a">
<h4 class="namesss">Lorem</h4>
</div>
<div class="webserv2 divshow" target="b">
<h4 class="namesss">Ipsum</h4>
</div>
<div class="webserv3 divshow" target="c">
<h4 class="namesss">Dolor</h4>
</div>
</div>
<!-- Hidden info boxes1 start-->
<div class="service-info" id="diva">
<p>Lorem1 ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
<div class="service-info" id="divb">
<p>Lorem2 ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
<div class="service-info" id="divc">
<p>Lorem3 ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
<!-- Hidden info boxes1 end-->
和我的CSS的一部分:
.service-info {
display:none;
position:relative;
float:left;
width:300px;
height:100px;
background-color:#a5a2a2;
color:#fff;
padding:3%;
border-radius:5px;
border:2px solid #dbdbdb;
}
div可见时,如何隐藏其他div?
谢谢你的时间!
最佳答案
您的解决方案无效,因为您使用了错误的类选择器来隐藏元素。此外,您还需要使用.not()
来防止对当前单击的元素div目标div隐藏:
$('.divshow').click(function(){
$('.service-info').not('#div'+$(this).attr('target')).hide();
$('#div'+$(this).attr('target')).slideToggle();
});
Demo