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 回答