slideToggle() 多个元素 show/hide

Question

当一个元素打开时，所有其他打开的元素都会关闭。

我有这个代码：

jQuery(document).ready(function() {
    jQuery('#servico1').click(function() {
            jQuery('.descricao2').hide("slow");
            jQuery('.descricao3').hide("slow");
            jQuery('.descricao4').hide("slow");
            jQuery('.descricao1').slideToggle("slow");
    });
    jQuery('#servico2').click(function() {
            jQuery('.descricao1').hide("slow");
            jQuery('.descricao3').hide("slow");
            jQuery('.descricao4').hide("slow");
            jQuery('.descricao2').slideToggle("slow");

    });
    jQuery('#servico3').click(function() {
            jQuery('.descricao2').slideToggle("slow");
    });
    jQuery('#servico4').click(function() {
            jQuery('.descricao3').slideToggle("slow");
    });
});

我知道这是糟糕的代码，而且非常重复。我想知道如何创建更简单、更清晰的代码。

FIDDLE

Answer 1

这是您可以执行的操作。

1) 对所有锚元素使用单击处理程序

2) 在同一个 div 中的锚元素中使用点击的锚索引来定位所需的 div。

3) slideToggle 以 div 为目标并隐藏其兄弟 divs。

$('a.d-box-effect7-menu').click(function(){
   $('.descricao'+($('.d-box-effect7-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
});

slideToggle() 多个元素 show/hide

slideToggle() multiple elements show/hide

javascript

jquery

slidetoggle

Working Demo