Question

以下是相关代码：

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
    switchTabInfo(selectorID);
  });
  function switchTabInfo(selectorID){
    var actionID = selectorID.substring(4);
    actionID = "#" + actionID;
    $(actionID).slideDown();
  }
})

所以简而言之，我有一个这样的.infoList类，其id名称绑定到nav li id。例如，列出项目的id可能是nav_testsHistory。通过类名隐藏所有内容框，这个javascript会产生令人愉悦的向上滑动效果。

但第三个内容框在第三个框推后第二个内容框闪烁。它在不必要的时间内上下滑动。

如果我添加这样的提醒：

$(".navItems>ul>li").live('click', function(){
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
  alert('bubble');
});

警报会发射3次？！

所以我的研究开始阅读有关事件泡沫的内容。我找不到的是如何检查它是否被解雇。我没有尝试设置输入值并围绕嵌套滑块操作进行tf测试。原因很粗糙。

更多信息，上面的所有代码都在一个函数中，该函数在init（）函数中，在文档就绪时调用。除了jquery 1.3.2之外，这是唯一的js文件。

你们有什么想法？

Answer 1

我认为你的问题不是冒泡，而是你的选择器。你是按类选择的，所以所有的类都会运行那个动画（所有3个，这就是你得到3个警报的原因）。

我认为在这种情况下：

$(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

你可能想要的是：

$(".infoList:visible").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

目前您正在选择所有class="infoList"并向上滑动，如果您只想隐藏可见的那个，请添加:visible选择器。 .stop()还可以消除一些队列问题，例如：

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})

Answer 2

$(".infoList")未绑定到任何上下文，因此在其他li元素中您也可以拥有这些元素，并为所有人发起slideUp。

您可能希望将其更改为：

$(".infoList", this).slideUp...

如何使用jQuery解决事件泡泡：.live（）

2 个答案: