2013-03-04 132 views
0

我有一堆物品可以通过单击图标单独折叠/预先打包。 我需要再修改一下我的代码。我需要在顶部添加另一个图标。当您点击它时,您可以一次展开/折叠 以下所有项目。有人可以帮我解决这个问题吗?jquery展开/折叠所有项目

这里是我的javascript代码

$(document).on('show hide', '#programs-accordion', function(e) { 
    $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus'); 
}); 

这里是我的HAML代码

#programs-accordion.accordion 
    - @patient_summary.programs.each_with_index do |program, index| 
    .accordion-group 
     .accordion-heading 
     .accordion-toggle.group-accordion-toggle 
      %a{ href: "#collapse-#{index}", data: { parent: '#programs-accordion', toggle: 'collapse' }} 
      %i.icon-plus 
      %a= program.name 
     .accordion-body{id: "collapse-#{index}", class: (@office.to_i == office.id) ? "" : "collapse" } 
      .accordion-inner 
      - office.positions.each_with_index do |position, index| 
       #measures-accordion.accordion 
       .accordion-group 
        .accordion-heading 
        .row-fluid 
         .span2{class: "offices-#{position.status}"}= position.status 
         .span1= position.results.first.value 
         .span2= position.results.first.value_date_time.blank? ? '' : Date.parse(position.results.first.value_date_time) 
         .span5= position.name 

编辑:JS小提琴以下链接

http://jsfiddle.net/HqXMN/

+1

您可以张贴在jsbin /的jsfiddle小提琴? – 2013-03-04 20:15:19

+1

haml(?)代码没多大用处。请发布输出的HTML。 – Popnoodles 2013-03-04 20:16:40

+0

这是jsfiddle。 http://jsfiddle.net/HqXMN/ – newbie 2013-03-04 21:21:28

回答

0

我在这里工作。

$('.expandcollapse').click(function() { 

    $('.collapse').each(function(index) { 
     $(this).collapse("toggle"); 
    }); 

    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") { 
     $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All"); 
    } 
    else { 
     $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All"); 
    }; 
}); 

http://jsfiddle.net/HqXMN/6/

0

也许是这样的:

$('.expandButton').click(function() { 
    $('.accordion-body').addClass('collapsed'); 
    $('.accordion-toggle i').removeClass('icon-plus'); 
    $('.accordion-toggle i').addClass('icon-minus'); 
});