0

我试图制作一个动画列表，当单击一个项目时，一个子 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>
4

4 回答 4

2

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

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

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

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

于 2012-10-12T10:51:26.160 回答
0

试试这个选择器

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

所以你将点击处理程序绑定到那些锚元素，这些锚元素是外部的直接子元素ul li

于 2012-10-12T10:46:01.450 回答
0

使用属性选择器：

$('.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>
于 2012-10-12T10:47:45.263 回答
0

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

$('.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添加一个类，这样你就可以检查你选择了哪一个

于 2012-10-12T10:50:31.583 回答