Question

当点击目标div时，我试图滑动div。我试图用一个函数来操纵所有的div，我试图使用相同的类。

但是，当我点击说，div1 - divA slidetoggles之后，如果我点击div2 - divB slidetoggles在divA下面。

我想要实现的是在用户点击目标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？谢谢你的时间！

Answer 1

您的解决方案无效，因为您使用了错误的类选择器来隐藏元素。您还需要使用.not()来防止隐藏当前点击的元素目标div：

 $('.divshow').click(function(){
                $('.service-info').not('#div'+$(this).attr('target')).hide();
            $('#div'+$(this).attr('target')).slideToggle();
        });

<强> Demo

Answer 2

另一种可能性：

跟踪已打开的div并'切换回'。

var tg=false;

$(document).ready( function() {
        $(function(){
            $('.divshow').click(function(){
            if(tg!==false && $(this).not(tg))$('#div'+$(tg).attr('target')).slideToggle();
            $('#div'+$(this).attr('target')).slideToggle();
            tg=$(this);
            });
        });
    });

这是fiddle

当用户点击目标div时，只显示必要的div

2 个答案: