我有许多信息面板共享同一个类，我希望使用 slideToggle 函数显示/隐藏它们。面板的内容是通过json动态拉进来的。所以我必须使用'live'而不是'bind'功能？以下代码将同时切换所有面板。我希望一次只切换一个面板。
$('a.sc-info-toggle').live('click', function() {
$('.sc-info').slideToggle();
return false;
});
非常感谢
【问题讨论】：
标签： javascript jquery
您不必使用.each()，因为jQuery 默认将您的函数应用于匹配的元素，并且您必须将return false; 放在发生点击事件的位置。所以这可能是你想要做的：
$('a.sc-info-toggle').live('click', function(event) {
$('.sc-info').slideToggle();
return false;
});
【讨论】：
您从 .each() 回调中返回 false，而不是从 .live() 回调中返回：
$('a.sc-info-toggle').each(function(){
$(this).live('click', function(event) {
$('.sc-info').slideToggle();
return false;
});
});
根据文档，从 .each() 回调返回 false：
我们可以在特定的迭代中打破 $.each() 循环，方法是 回调函数返回假。返回非 false 与 a 相同 for 循环中的 continue 语句；它会立即跳到下一个 迭代。
并且从.live 回调中返回 false 基本上取消了底层事件的默认操作。
顺便说一句，.live() 现在已弃用，您应该在旧版本中使用 .on()（在 jQuery 1.7+ 中）和 .delegate()。
【讨论】：
live 已弃用。你想改用on
$(document).on('click', 'a.sc-info-toggle', function() {
$('.sc-info').slideToggle();
return false;
});
您尚未说明单击的锚点与您要滑动的面板之间的关系。如果面板就在锚点旁边，这应该可以工作：
$(document).on('click', 'a.sc-info-toggle', function() {
$(this).next('.sc-info').slideToggle();
return false;
});
理想情况下，尝试识别某个容器（例如，id 为 foo 的 div），它将始终包含所有这些锚点，然后选择 that 而不是 document。
$("#foo").on('click', 'a.sc-info-toggle', function() {
$('.sc-info').slideToggle();
return false;
});
这可能会更有效率，因为您不会听到文档上发生的每一次点击，而只会听到foo 内部发生的点击。
【讨论】：
return false，但这更多的是出于习惯而不是良好的实践。我的理解是返回 false 将允许事件冒泡（在最后返回 false 之前）。防止默认将阻止事件甚至冒泡，从而提高性能。另外，我觉得它更优雅：event.preventDefault() 肯定是明确的。 ;-) 只需将事件传递给函数。
stopPropagation() 或为 IE 设置 cancelBubble = true）
新年快乐， 伙计，你为什么要使用它真的不需要的每个循环，让它变得简单如下：
$('a.sc-info-toggle').live('click', function(event) {
// $(this) will return the link which is clicked
$(this).find('.sc-info').slideToggle();
return false;
});
【讨论】：
代替：
$('.sc-info').slideToggle();
您需要定位与切换开关相关的 .sc-info。
例如，如果您的 html 看起来像这样：
<a href="#" class="sc-info-toggle">Toggle</a>
<div class="sc-info">
<p>Content</p>
</div>
你可以用这个：
$('a.sc-info-toggle').live('click', function() {
$(this).next('.sc-info').slideToggle();
return false;
});
如果切换位于内容内部，则使用 .parent() 而不是 .next()。
希望有帮助:)
【讨论】：
命令return false; 只会退出.each 循环。
此外，在.live 中，您可以滑动切换该页面上的所有 .sc-info，而不仅仅是与您单击的按钮相关的那个。
$('a.sc-info-toggle').live('click', function(event) {
$(**the.div.you.need**).slideToggle()
});
【讨论】：
live 将事件处理程序绑定到匹配选择器的元素，无论它们现在存在还是将来存在。所以在这里使用每个有点愚蠢。这也是一样的：
$('a.sc-info-toggle').live('click', function(event) {
$('.sc-info').slideToggle()
return false;
});
【讨论】：
你不需要each()，jQuery 会处理它，因为选择器会返回一个数组，return false 也应该在live() 回调中：
$('a.sc-info-toggle').live('click', function() {
$('.sc-info').slideToggle();
return false;
});
但是，如果您使用的是最新版本的 jQuery (1.7+)，请使用 .on() 方法。否则，我建议尽可能使用.delegate()，因为它更有效。见https://stackoverflow.com/a/4579154/978306
【讨论】：
好的，这取决于您的 HTML 的外观，但目前您的目标是使用 .sc-info 类的所有元素，而不仅仅是切换链接附近的元素。
它应该看起来像这样（同样，取决于您的标记）：
$('a.sc-info-toggle').live('click', function(event) {
$(this).parent().find('.sc-info').slideToggle();
});
这会在这样的结构中找到面板：
<div>
<a class="sc-info-toggle">Toggle 1</a>
<div class="sc-info">Panel 1</div>
</div>
<div>
<a class="sc-info-toggle">Toggle 2</a>
<div class="sc-info">Panel 2</div>
</div>
【讨论】：
这应该可以（我猜手柄是滑动元素的子元素）：
$('a.sc-info-toggle').live('click', function() {
$(this).parents('.sc-info').slideToggle();
return false;
});
【讨论】：