Question

我有2个班级 - .item和.item-description。项始终可见，但项目描述不可见。它应该在用户单击按钮后立即可见，在下一次单击时它应该再次隐藏。

这是我的JSFiddle。

jQuery函数看起来像这样，并且它不起作用:-)

$(function() {
  $("table .item td:last-child").click(function() {
    $(this).parent().closest(".item-description").show();
  });
});

Answer 1

您使用了错误的选择器。您需要使用.next()或.siblings()代替.closest()：

$(this).parent().next().show();

使用.toggle：

$(this).parent().next().toggle();

<强> Working Demo

使用toggleClass：

$(this).parent().next().toggleClass('item-description');

<强> Demo

Answer 2

以下是我将如何解决这个问题：

$(function () {
    $("table .item td:last-child").click(function () {
        //-- Store a reference to the description element
        var $next = $(this).parent().next('.item-description');
        //-- Toggle the description, causing it to either hide or show.
        $next.toggle();
        //-- hide all sibling descriptions
        $next.siblings('.item-description').hide();
    });
});

更新了JSFiddle：http://jsfiddle.net/sZp3C/8/

Answer 3

这是我的解决方案：

$("table > tbody > tr.item").click(function() {    
    $(this).next("tr").toggle();
});

JSFIDDLE：http://jsfiddle.net/sZp3C/7/

jQuery - 单击后只显示同一个类的一个项目

3 个答案: