Question

我试图制作一个动画列表，当点击一个项目时，一个孩子UL切换显示并变得可见。但问题是，当用户在新显示的列表中单击子LI时，再次切换显示，而不是链接转到新页面...

我的jQuery是......

//Product range expander
$('.product-range ul li a').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

...标记

<ul>
<li>
   <a href="#">United Kingdom</a>
       <ul style="display: none;">
           <li><a href="page1.html">Product</a></li>
           <li><a href="page2.html">Product</a></li>
           <li><a href="page3.html">Page</a></li>
        </ul>
</li>
</ul>

Answer 1

更改您的选择器，使其仅使用仅选择直接后代的CSS2 child selector定位第一个锚点。

$('.product-range > ul > li > a').click(function(e) {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

您当前的选择器将您的函数应用于嵌套在a内的所有li标记，该标记嵌套在ul标记内，无论深度如何。

这里的工作示例：http://jsfiddle.net/P9k9w/9/

Answer 2

尝试使用此选择器

$('.product-range > ul > li > a').click(function() {

因此您将点击处理程序仅绑定到外部ul li的直接子项的那些锚元素

Answer 3

使用属性选择器：

$('.product-range ul li a[href="#"]').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

或者您可以添加不同的类来锚定哪些链接和锚点只切换子列表：

$('.product-range ul li a.handle').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

<ul>
<li>
   <a href="#" class="handle">United Kingdom</a>
       <ul style="display: none;">
           <li><a href="page1.html" class="truelink">Product</a></li>
           <li><a href="page2.html" class="truelink">Product</a></li>
           <li><a href="page3.html" class="truelink">Page</a></li>
        </ul>
</li>
</ul>

Answer 4

尝试将此添加到您的代码中：

$('.product-range ul li a').click(function() {
var parent_ul = $(this).parents("li").find("ul")

  if(parent_ul.is(':visible')) { // if vizible, go to link
    return true
  } else { // if hidden, show
    parent_ul.toggle('slow')
    return false;
  }
}

或者在ul中添加一个类，以便您可以检查选择哪一个

jQuery中的动画切换不通过链接

4 个答案: