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类（Boules，Livres，Wirelace）的3个LI。

我有这个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

实际上通常也足以选择ul.child li a，因此.child下的元素实际上都附加了两个处理程序。如果您只是使选择器更具体，可以避免此问题。

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

还尝试使用子选择器ul > li > ul，而不是给它们类来表明它们是孩子。

jQuery切换的奇怪问题..？

1 个答案: