4

抱歉，如果标题不准确 - 我不知道如何措辞。

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

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

“widget-content”是隐藏的，当您单击widget-title 时，会出现内容，并且将一个类应用于widget-title，将其更改为“widget-title open”。这部分工作查找，小部件内容也打开。

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

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

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

有人可以提供一个工作示例吗？谢谢

4

7 回答 7

19 
$('.widget .widget-title').click(function() {
    $(this)
        .addClass("open")
        .parent().find('.widget-content').show('slow', function() {
            // Animation complete.
        });
});
于 2012-04-26T18:21:15.573 回答
2

我想你想要这个：

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

.widget-title它打开所选元素的父级。

于 2012-04-26T18:21:13.743 回答
2

尝试这个：

$('.widget-title').click(function() {
  $(this).parent('.widget').children('.widget-content').show('slow', function() {
    $(this).addClass('open');
  });
});
于 2012-04-26T18:22:44.513 回答
1

我今天遇到了同样的问题，这是一个快速的解决方案 $('#parent > childNode'); http://api.jquery.com/child-selector/

于 2014-04-07T08:17:50.550 回答
0

.children() http://api.jquery.com/children/

我不完全确定我是否理解你，但这可能会对你有所帮助。

于 2012-04-26T18:19:17.387 回答
0 
$('div.widget-title').click(function() {
 var el = $(this);
 el.addClass('open');siblings('div.widget-content').show('slow',function() {
     //animation complete
 });
});

您需要使用引用当前 DOM 元素的“this”关键字将回调函数保留在上下文中。否则，您将在回调中获取所有带有 widget-title 类的 DOM 元素。

于 2012-04-26T18:21:33.313 回答
0

如果按类选择，jquery 将选择该类的所有成员。您是否可以为此特定的小部件或父容器设置 ID 或属性？

于 2012-04-26T18:22:36.707 回答