1

我在切换的 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 的显示,仅当单击子链接时它不再起作用(它不会通过谷歌),任何人都可以看到我哪里出错了吗?

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

4 回答 4

1

STYLE 拼写错误。

stlye=

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

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

仅当找到子 UL 时,才会返回 false。

于 2013-03-25T19:05:16.537 回答
0

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
}); 
于 2013-03-25T19:05:58.710 回答
0

假设您显示的内容在 a 内部ul,而后者又在具有 class 的元素内部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,但我认为这只是问题中的一个错字。(为什么人们不使用复制和粘贴?!;-))

于 2013-03-25T19:03:28.433 回答
-1

由于您的return false语句正在取消默认链接操作,因此您需要更加具体,以免您针对希望允许继续运行的链接。

尝试这个:

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

jsFiddle 示例

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

于 2013-03-25T19:06:21.120 回答