logo标签列表

单个jQuery函数用于单独切换多个元素

jqueryhtml
5
我需要一个单一的jQuery函数，可以重复使用来单独切换多个元素。 jQuery页面上的代码示例http://api.jquery.com/slidetoggle/在使用按钮控制单个元素时效果良好，但不适用于使用非按钮元素控制多个元素。
我的代码（改编自jQuery滑动切换示例）：
<!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>

代码允许单独切换每个元素，这正是我想要的。但是，我的代码有两个问题：
1. 它是重复和低效的，因为每个我想要切换的元素都需要编写一个新的脚本（我希望有一个单一的函数，可以切换特定类名的任何元素）。 2. 默认情况下，页面会显示所有元素的完整内容。我希望默认情况下将可切换元素隐藏。
我一直无法找到解决这两个问题的简单方法。任何帮助将不胜感激。
为相似的元素添加一个通用类 - 请查看：http://jsfiddle.net/VUs5W/ - Shaunak D
Shaunak，谢谢，但这只能在第一和第二之间切换，如果需要，我需要能够同时显示两个。 - Grant_Bailey
2个回答
3

使用相同的类来处理事件源中的所有数据集。您可以仅使用两个类轻松有效地处理n个HTML数据集。

查看演示

<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);
});
谢谢 Adil - 完美的！ - Grant_Bailey
1
$(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/

jsfiddle {{链接1：http://jsfiddle.net/guest271314/6aMk7/}}

如果有人想要上述内容的解释：在您的$('...')调用中使用多个元素选择器，用逗号分隔。 - HoldOffHunger
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接