当用户单击目标 div 时仅显示必要的 div答案

【问题标题】：Show just the necessary div when user clicks on a targeted div当用户单击目标 div 时仅显示必要的 div
【发布时间】：2014-07-23 09:41:22
【问题描述】：

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

但是当我点击说时，div1 - divA 滑动切换，然后如果我点击 div2 - divB 在 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？感谢您的宝贵时间！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

Demo

【讨论】：

哦，非常感谢！顺便问一下，我怎样才能让两次点击之间的过渡更顺畅？
@EkinHazal：您可以使用.slideUp() 代替.hide()。看这个演示jsfiddle.net/7yCMJ
@EkinHazal：很高兴它帮助了你:)

【解决方案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 时它并没有关闭。
是的，注意到 :-) 更新了答案和小提琴。