Javascript 当用户单击目标div时，仅显示必要的div

我正在尝试滑动切换一个div，单击目标div时。我试图用一个函数操作所有的div，我试图使用相同的类

但当我点击say时，div1-divA滑动切换，然后点击div2-divB滑动切换到divA下面

我想要实现的是，当用户单击目标div时，只显示必要的div

以下是我迄今为止所做的工作：

我的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-->

当一个div变为可见时，如何隐藏任何其他div？

---

谢谢你的时间

您的解决方案不起作用，因为您使用了不正确的类选择器来隐藏元素。您还需要使用

.not（）

来防止隐藏当前单击的元素目标div：

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

---

您的解决方案不起作用，因为您使用了不正确的类选择器来隐藏元素。您还需要使用

.not（）

来防止隐藏当前单击的元素目标div：

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

另一种可能性：

跟踪打开的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);
            });
        });
    });

这是另一种可能性：

跟踪打开的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);
            });
        });
    });

---

这是一个

哦，非常感谢！顺便问一下，我怎样才能使两次单击之间的过渡更加平滑？@EkinHazal:您可以使用

.slideUp（）

而不是

.hide（）

。看到这个演示@EkinHazal:很高兴它帮助了你：）哦，非常感谢！顺便问一下，我怎样才能使两次单击之间的过渡更加平滑？@EkinHazal:您可以使用

.slideUp（）

而不是

.hide（）

。看到这个演示@EkinHazal:很高兴它帮助了你：）嘿，谢谢，但是当你点击两次一个div时它不会关闭。是的，注意到：-）更新了答案和小提琴。嘿，谢谢，但是当你点击两次一个div时它不会关闭。是的，注意到：-）更新了答案和小提琴。