jQuery - 如何选择父元素的子元素？

Question

对不起,如果标题不准确 - 我无法弄清楚如何说出来.

我有多个具有相同类的小部件<div class="widget"></div>- 每个小部件都有一个标题和内容,结构如下:

<div class="widget">
    <div class="widget-title">Title</div>
    <div class="widget-content">Content Here</div>
</div>

隐藏"窗口小部件内容",当您单击窗口小部件标题时,将显示内容,并将一个类应用于窗口小部件标题,将其更改为"窗口小部件标题打开".这部分适用于查找,并且窗口小部件内容也会打开.

问题是,它在所有小部件上打开小部件内容.它应该只打开单击标题的特定小部件中的小部件内容,而不是所有小部件.我不确定使用什么语法是正确的,因此它只打开用户单击标题的特定小部件的小部件内容.

这是我到目前为止的代码:

$('.widget').find('.widget-title').click(function() {
  $('.widget-content').show('slow', function() {
    // Animation complete.
  });
  $('.widget').find('.widget-title').addClass("open");
});

有人可以提供一个有效的例子吗？谢谢

Answer 1

$('.widget .widget-title').click(function() {
    $(this)
        .addClass("open")
        .parent().find('.widget-content').show('slow', function() {
            // Animation complete.
        });
});