Question

我有几个元素在点击时显示div。唯一的问题是当你全部点击它们时，所有的div都被打开而不是被点击的那个。

我的jquery：

<script>
$(document).ready(function() {
    $('.servicemark').click(function() {
        console.log($(this).attr('data-toggle'));
        var type =  $(this).attr('data-toggle');
        $('.'+type).slideToggle("slide");
    });
});
</script>

我的html / php：

<section class="def-section home-services">
    <div class="container">
        <div class="row">
    <?php
    foreach($blocks as $block) {
      $images = json_decode($block->images);
      echo '
      <!-- === SERVICE ITEM === -->
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 servicemark" data-toggle="'.$block->alias.'" style="cursor:pointer;">
        <div class="service-mark-border-top"></div>
        <div class="service-mark-border-right"></div>
        <div class="service-mark-border-bottom"></div>
        <div class="service-mark-border-left"></div>
                <div class="service">
                    <div class="service-icon">
                        <img src="cms/'.$images->image_intro.'" />
                    </div>
                    <h3>'.$block->title.'</h3>
                    <div class="service-text">
                        <p>'.$block->introtext.'</p>
                    </div>
                </div>
        </div>
  ';
}
?>

 <div class="row zee-container-vervoer" style="display:none;">
    <div class="text">
        <p>Zee container vervoer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
    </div>
 </div>
 <div class="row gevoelige-lading" style="display:none;">
    <div class="text">
        <p>Speciale lading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
    </div>
 </div>
 <div class="row temperatuur-gevoelige-lading" style="display:none;">
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
    </div>
 </div>
 <div class="row explosieve-lading" style="display:none;">
    <div class="text">
        <p>Gevaarlijke stoffen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p>
    </div>
 </div>
</div>
</section>

现在所有内容都通过正确元素的别名进行过滤（类名与别名相同）。如何关闭除当前打开的元素之外的所有其他元素？

Answer 1

试试这个（基于并感谢Juan C.评论）：

$('.' + type).slideToggle("slide").siblings(".row").hide();

Answer 2

试试这个：

$(document).ready(function() {

    $('.servicemark').click(function() {

        console.log($(this).attr('data-toggle'));


        $(".servicemark").slideUp();

        $(this).slideDown();

    })

})

当前div打开时关闭其他打开的div（jQuery）

2 个答案: