Question

我有手风琴的扩展/折叠效果，但是当我点击第一个面板展开按钮时，它也会扩展所有其他面板。

我想在点击相应的折叠链接时打开父面板。

这是我的代码

$('.stats-panel').hide();
       $(".expand a").click(function(){
           $(this).parent().toggleClass('collapse');
         $('.expand').parent().children().find('.stats-panel').slideToggle();
         $('.key-project-graph').slideToggle();
    });

DEMO

PS-HTML结构无法更改

Answer 1

问题是选择器$('.expand')

$(this).closest('.activity-block').find('.stats-panel').slideToggle();

演示：Fiddle

如果您想一次只展开一件商品，那么

var $target = $(this).closest('.activity-block').find('.stats-panel').stop(true, true).slideToggle();
$('.activity-block .stats-panel').not($target).stop(true, true).slideUp();

演示：Fiddle

Answer 2

尝试类似这样的内容， FIDDLE

$('.stats-panel').hide();
   $(".expand a").click(function(){
       $(this).parent().toggleClass('collapse');
     $(this).parent().parent().children().find('.stats-panel').slideToggle();
     //$('.key-project-graph').slideToggle();
     return false;
});

Answer 3

问题在于这一行

 $('.expand').parent().children().find('.stats-panel').slideToggle();

您正在使用类选择器，它正在查找具有相同类名的所有元素。相反，您已经使用 this 运算符。

由于您要从.expand访问 .expand a 的父级，请尝试以下

$(this).parent().parent().children().find('.stats-panel').slideToggle();

fiddle

用于展开链接的jquery父选择器

3 个答案: