javascript - jQuery onclick 隐藏其父元素

Question

我想用 jQuery隐藏<li>标签点击标签。<a>

<ul>
  <li>
    <a href="'>Something</a>
  </li>
  <li>
    <a href="'>Something</a>
  </li>
  <li>
    <a href="'>Something</a>
  </li>
</ul>

换句话说，如果有人点击link( <a></a>)，它的父<li>级就会被隐藏。

score 7 · Accepted Answer

(function() {
  $("ul li a").click(function(e) {
    e.preventDefault();
    $(this).parent().hide();
  });
})(jQuery);

也尝试“一个” jQuery 函数

(function() {
  $("ul li a").one('click', function(e) {
    e.preventDefault();
    $(this).parent().hide();
  });
})(jQuery);

score 4 · Accepted Answer

使用.click处理事件，然后使用.parent和.hide方法。

$("a").click(function(){
    $(this).parent().hide(); // this is the link element that was clicked
})

上面的代码假定链接直接包含在列表元素 ( <li>) 中。如果不是这种情况，您可以将选择器传递给这样的.parent方法：

$(this).parent("li").hide();

这将通过您的链接的祖先找到并返回一个<li>.

返回假

通常，当您单击<a>标签时，浏览器将导航到标签的 href。如果您不希望这样，您可以return false;从单击处理程序或添加返回 false: 的 href: <a href="javascript:void(0)">Link</a>。在这个问题中有更多关于这个的讨论。

有很多不同的方法可以做到这一点

您可能需要代码的变体，因为：

您可能在页面上有不想隐藏其父级的其他链接。这就是为什么使用“ul li a”作为选择器而不是“a”是有意义的——它只会匹配列表内的链接
可以使用.preventDefault()事件对象的，而不是返回false来防止浏览器改变地址
由于单击后链接将被隐藏，因此您还可以使用.one方法-单击链接后它将删除事件处理程序。如果您打算稍后再次显示该链接，请不要这样做。
如果您的列表是动态的，您可以使用.on代替.click，即您将使用 Javascript 向其添加链接
一些回答者将代码包装在所谓的自调用函数中。它看起来像这样：(function() { /* code */})(jQuery);。我不会向初学者推荐这个，尽管它会帮助你稍后构建你的代码。基本上，它可以帮助您避免代码中不需要的副作用，并允许您使用.noConflict。

score 1 · Accepted Answer

$( "a" ).click( function(){
    $( this ).parent().hide();
    return false;
} );

score 1 · Accepted Answer

试试这个隐藏父母li并防止点击超链接的默认操作。请参阅http://api.jquery.com/event.preventDefault/：

$(function() {
    $("a").click(function(e) {
       e.preventDefault();
       $(this).parent().hide();
    });
});

score 1 · Accepted Answer

您可以使用.parent()来定位元素的父级，并.hide()隐藏它。有关这些函数使用的详细信息，请参阅 jQuery 文档。您还应该使用.preventDefault()来阻止浏览器跟踪该链接。

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        $(this).parent().hide();
    });
});

score 1 · Accepted Answer

不要忘记使用return false;

  $('a').click(function(){
      $(this).parent().hide();
      return false;
  });

score 0 · Accepted Answer

0

$('a').click(function(){
    $(this).parent('li').hide();
});

于 2012-09-01T10:18:06.713 回答

7 回答 7