jquery - jQuery 切换的奇怪问题..？

Question

我有一个带有一堆 LI 的菜单/UL，在这些 LI 中，我还有一些 UL，LI...看看:

<ul class='parent'>
  <li><a>Boules</a></li>
  <li>
    <a>Livres</a>
    <ul class='child'>    
      <li><a>Magazines</a></li>
      <li><a>Revues</a></li>
      <li><a>Romans</a></li>
    </ul>
  </li>
  <li>
    <a>Wirelace (3 childs)</a>    
    <ul class='child'>
      <li><a>Bleu</a></li>
      <li>
        <a>Rouge</a>
        <ul class='subchild'>
          <li><a>4mm</a></li>
          <li><a>6mm</a></li>    
        </ul>
      </li>
      <li>
        <a>Vert</a>
        <ul class='subchild'>
          <li><a>2mm</a></li>
          <li><a>4mm</a></li>    
          <li><a>6mm</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

所有 UL .child 和 .subchild 都使用 CSS display:none; 隐藏，因此当您加载页面时，您看到的只是 PARENT 类的 3 个 LI(Boules、Livres、Wirelace)。

我有这个 jQuery 代码(按预期工作)来切换 UL .child 的显示，当单击 LI 时显示，但子 UL 保持隐藏，如预期的那样:

$("ul.parent li a").click(function() { 
    $(this).next().toggle(); 
    return false;
});

我也有这个用于 UL .subchild，但它不起作用，即使它是相同的:

$("ul.child li a").click(function() { 
    $(this).next().toggle(); 
    return false;
});

如果我这样做，它会按预期工作:

$(this).next().toggle().toggle();

如果我只使用 1 个切换，它会与显示器一起播放(我在 Firebug 中看到它)，但如果它被隐藏(通过原始 CSS)，它会添加 display:none。如果我删除 CSS(使其在页面加载时可见)，它会添加 display:block。

它按预期运行的唯一方法是，如果我用 show() 或 hide() 强制它。但是我没有切换功能。

即使 if($(this).is("visible")) 也不会工作...

在 Firefox、Chrome、Safari、IE8 中都是如此。

我很抱歉发了这么长的帖子，任何人都知道是什么原因造成的......？？？

Answer 1

问题是选择器

ul.parent li a

in fact is general enough to also select ul.child li a，所以 .child 下的元素实际上有两个处理程序附加到它们。如果您只是让选择器更具体一些，就可以避免这个问题。

ul.child > li > a, ul.parent > li > a

也尝试使用子选择器，ul > li > ul 而不是给他们类来表明他们是 child 。