单个 jQuery 函数可单独切换多个元素答案

【问题标题】：Single jQuery function to toggle multiple elements individually单个 jQuery 函数可单独切换多个元素
【发布时间】：2014-07-04 14:51:08
【问题描述】：

我需要一个可重复用于单独切换多个元素的 jQuery 函数。 jQuery 页面http://api.jquery.com/slidetoggle/ 上的代码示例适用于使用按钮的单个元素，但不适用于使用非按钮元素的多个元素。

我的代码（改编自 jQuery slidetoggle 示例）：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

<div class="first">Toggle first</div>
    <p class="first">First hidden paragraph.</p>
<div class="second">Toggle second</div>
    <p class="second">Second hidden paragraph.</p>

<script>
$( "div.first" ).click(function() {
$( "p.first" ).slideToggle(0);
});
</script>

<script>
$( "div.second" ).click(function() {
$( "p.second" ).slideToggle(0);
});
</script>

</body>
</html>

代码允许单独切换每个元素，这正是我想要的。但是，我的代码有两个问题：

这是重复且低效的，因为需要为我希望使其可切换的每个元素编写一个新脚本（我希望使用单个函数来切换特定类名的任何元素）。
默认情况下，页面显示时所有元素都完整显示。我希望默认隐藏可切换元素。

我一直无法找到解决这两个问题的直接解决方案。任何帮助将不胜感激。

【问题讨论】：

为相似的元素添加一个公共类 - 检查这个：jsfiddle.net/VUs5W
Shaunak，谢谢，但这只会在第一和第二之间切换，如果需要，我需要能够同时显示两者。

标签： jquery html

【解决方案1】：

对具有事件源的所有集合使用相同的类。您可以非常有效地对 n 个 html 集使用两个类。

Live Demo

<div class="first">Toggle first</div>
    <p class="first-p">First hidden paragraph.</p>
<div class="first">Toggle second</div>
    <p class="first-p">Second hidden paragraph.</p>

通过 next() 使用当前对象

$('.first-p').hide();   
$( "div.first" ).click(function() {
    $(this).next().slideToggle(1000);
});

【讨论】：

感谢阿迪尔 - 完美

【解决方案2】：

$(function () {
    $(".first, .second")
    .filter("p")
    .toggle()
    .addBack()
    .not("p")
    .click(function (e) {
       return $("." + e.target.className).not("div").slideToggle(0)
    });
});

jsfiddle http://jsfiddle.net/guest271314/6aMk7/

【讨论】：

如果有人想要解释上述内容：在 $('...') 调用中使用多个元素选择器，用逗号分隔。