Question

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

我的代码（改编自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>

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

重复且低效的是，需要为我想要切换的每个元素编写一个新脚本（我更喜欢用一个函数来切换特定类名的任何元素）。
默认情况下，页面显示所有元素全部显示。我宁愿隐藏可切换的元素。

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

Answer 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);
});

Answer 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/

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

2 个答案: