Question

有人可以告诉我为什么这不起作用？我正在尝试显示和隐藏内容。

这是我的标记

<div class="entry">
  <p class="posted">
    test<br />
    <a href="#" class="toggle" title="Show Comments">
      Show/Hide
    </a>
  </p>
  <div class="box" class="comment">
    test hidden comment
  </div>
</div>

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').next('div.box').toggle(400);
  });
});

此示例现在的方式，如果我采取最后一个结束div并在结束p标签之后将其移动，它可以正常工作但显示并隐藏所有隐藏内容（div），这是不是我追求的。我只想显示与每个链接相关的内容。

Answer 1

问题不是parents，而是next()。 next()获取兄弟元素，而您需要嵌套的子元素。请改用children()。试试这个，它对我有用：

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').children('div.box').toggle(400);
  });
});

Answer 2

尝试使用.parent代替.parents。

这将有效：

    $(function() {
        $('div.box').hide();
        $('a.toggle').click(function() {
        $(this).parent('.posted').next('div.box').toggle(400);
        });
    });

Answer 3

class="comment" overrides class="box", use class="comment box"

Answer 4

如果您将next()更改为find()或children()，则此方法有效：

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').find('div.box').toggle(400);
  });
});

这是因为next()获取了对象的兄弟，而find()搜索了后代。当您的代码调用next()时，对象为'.entry'且没有兄弟姐妹，您可以使用children()作为zombat建议或find()，就像我查找div.box一样因为它是'.entry'的后代。

Answer 5

嗨Parkim，你指的是问题我正在使用该页面跳到顶端？我试过这个但它仍然做同样的事情。 - 千斤顶

nope，因为覆盖，你不能使用“.box”选择器。你跳转到顶部，因为“＃”锚，你应该使用“return false”来防止默认的“点击”处理程序。

$( "a" ).click( function() { /* your code */ return false; } );

Answer 6

作为替代方案，我分别使用closest和find代替parent和children，我认为这更符合偏好。

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).closest('.entry').find('div.box').toggle(400);
    return false;
  });
});

Jquery的父母（）帮忙

6 个答案: