Question

我在切换的div中有一个列表...

<li>
    <a href="#">Link</a>
    <ul stlye="display:none;">
        <li><a href="http://www.google.com">Child Link</a></li>
    </ul>
</li>

我写了一段jQuery来切换孩子UL的显示只有当点击一个子链接它不再有用时（它没有经过google），有人能看到我出错的地方吗？

//  Dropdown
$('.archives ul li a').click(function(){
    $(this).parent().find('ul').slideToggle();  
    return false;
});

Answer 1

STYLE拼错了。

stlye=

从你的帖子标题看来你想要这样的东西......

$('.archives ul li a').click(function(){
    var $children = $(this).parent().find('ul');
    $children.slideToggle();
    return $children.length > 0 ? false : true;
});

只有在找到子UL时，返回才会为假。

Answer 2

假设您所显示的内容位于ul内，而archives位于具有类.archives ul li a的元素内，则选择器return false;匹配两者父级和子级锚点，因为您使用了后代选择器，因此为子级调用了处理程序，<div class="archives"> <ul> <li> <a href="#">Link</a> <ul style="display:none;"> <li><a href="http://www.google.com">Child Link</a></li> </ul> </li> </ul> </div>阻止它执行默认操作（在链接之后）。

如果您的目标是仅为早期链接而不是子链接触发处理程序，那么您可能需要更具体。但是，您没有向我们展示足够的标记来帮助您更具体。如果我认为你的标记看起来像这样：

.archives > ul > li > a

...然后选择器只匹配“链接”锚点而不匹配“子链接”锚点stlye（例如，使用直接子选择器）。

另请注意，您有style而不是{{1}}，但我认为这只是问题中的拼写错误。 （人们为什么不使用复制和粘贴？！;-)）

Answer 3

ChildLink也与您的选择器匹配，并且在点击处理程序中您阻止了默认操作（将“导航到Google”）。

因此，您应该调整选择器以仅获取切换链接，或者使用此选项：

$('.archives ul li a').click(function(e){
    if ($(this).siblings('ul').slideToggle().length) // if we found a list to toggle
        e.preventDefault(); // or return false
});

Answer 4

由于您的return false语句正在取消默认链接操作，因此您需要更具体，以便不要定位希望继续运行的链接。

试试这个：

$('.archives > li > a').click(function () {
    $(this).parent().find('ul').slideToggle();
    return false;
});

<强> jsFiddle example

通过使用>子选择器并将目标更改为仅包含最外层列表的直接子链接，子链接将不会被选中并将继续工作。在您的代码中，您的$('.archives ul li a')将适用于任何子级链接，而不仅仅是顶级链接。

仅使用jQuery将return false添加到父链接

4 个答案: