1

这是有问题的代码：

$(".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 名称与导航 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次？！

所以我的研究转向阅读事件泡沫。我找不到的是如何检查它是否已被解雇。我没有尝试设置输入 val 并围绕嵌套滑块操作进行 tf 测试。因为那很粗鲁。

更多信息，上面的所有代码都在一个函数中，该函数在一个 init() 函数中，该函数在文档准备好时被调用。这是除了 jquery 1.3.2 之外唯一的 js 文件。

你们有什么感想？

4

2 回答 2

1

我认为您的问题不是冒泡，而是在您的选择器中。您按班级选择，因此所有班级都将运行该动画（全部 3 个，这就是您收到 3 个警报的原因）。

我认为在这种情况下：

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

你可能想要的是这样的：

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

目前您正在选择所有class="infoList"并向上滑动它们，如果您只想隐藏可见的，请添加:visible选择器。A.stop()还可以消除一些队列问题，总体而言是这样的：

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})
于 2010-03-20T00:56:01.973 回答
0

$(".infoList")不受任何上下文的约束，因此可能在其他li元素中您也拥有这些元素并且您slideUp为所有人开火。

您可能希望将其更改为：

$(".infoList", this).slideUp...
于 2010-03-20T00:56:58.833 回答