javascript - slideToggle() 多元素显示/隐藏

<分区>

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

我有这个代码:

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

最佳答案

这是您可以执行的操作。

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

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

3) slideToggle 定位 div 并隐藏它的兄弟 div。

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

Working Demo

关于javascript - slideToggle() 多元素显示/隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28321547/

上一篇：Javascript 比较时间不起作用

下一篇：javascript - 录制语音JS并发送到服务器

相关文章：

javascript - Firefox 中未定义 IMG1

javascript - jQuery - 从具有相同类的元素中获取不同的值

ios - 滑动窗口打开动画无法正常工作 [Titanium]

jquery - 滑动时隐藏div外的绝对元素

javascript - 使用 ramda.js 过滤对象数组

javascript - 如何在 Node.js 中使用图像切片？

javascript - 将 HTML 元素翻译成 Jquery 但看不到它们

php - Symfony - 覆盖字段选项(required = false 到 required = true)

javascript - 使用 Jquery 绘制矩形

jquery - 如何从右向左滑动切换div？