jQuery - Accordian（De-Collapse） [英] jQuery - Accordian (De-Collapse)

问题描述

好的，这个问题是我的 更早的版本问题 。

由于所有链接都已折叠，因此我想创建一个按钮或链接，显示全部显示使所有链接处于活动状态，即我想查看所有链接的数据。此外，还需要创建一个按钮或链接，指出隐藏所有，这将使折叠状态更早。

折叠状态

  ++++++++++++++++++++++++++++++++++++++ + 
 +链接1 + 
 +链接2 + 
 +链接3 + 
 +链接4 + 
 +++++++++++++ ++++++++++++++++++++++++++ 
  

单击显示全部后应该得到

  +++++++++++++ ++++++++++++++++++++++++++ 
 +链接1 + 
 +链接1行1 + 
 +链接1行2 + 
 +链接1行3 + 
 +链接2 + 
 +链接2行1 + 
 +链接2行2 + 
 +链接2行3 + 
 +链接3 + 
 +链接3行1 + 
 + Link 3 line 2 + 
 + Link 4 + 
 + Link 4 line 1 + 
 + Link 4 line 2 + 
 +++++++ ++++++++++++++++++++++++++++++++ 
  

如何做到这一点？

解决方案

内容面板。

  function expandAll（）{
 $（'＃accordion h3'）。removeClass（'ui-状态默认'）
 .addClass（'ui-state-active'）
 .removeClass（'ui-corner-all'）
 .addClass（'ui-corner-top'） 
 .attr（'aria-expanded'，'true'）
 .attr（'aria-selected'，'true'）
 .attr（'tabIndex'，0）
 .find（'span.ui-icon'）
 .removeClass（'ui-icon-triangle-1-e'）
 .addClass（'ui-icon-triangle-1-s'） 
 .closest（'h3'）。next（'div'）
 。显示（）; 
 $ b $（'。expand'）。text（'collapse all'）。unbind（'click'）。bind（'click'，collapseAll）; 
 
 $（'＃accordion h3'）。bind（'click.collapse'，function（）{
 collapseAll（）; 
 $（this）.click（）; 
}）; 
 
 $ b函数collapseAll（）{
 $（'＃accordion h3'）。unbind（'click.collapse'）; 
 
 $（'＃accordion h3'）。removeClass（'ui-state-active'）
 .addClass（'ui-state-default'）
 .removeClass（' ui-corner-top'）
 .addClass（'ui-corner-all'）
 .attr（'aria-expanded'，'false'）
 .attr（'aria-selected '，'false'）
 .attr（'tabIndex'，-1）
 .find（'span.ui-icon'）
 .removeClass（'ui-icon-triangle-1 -s'）
 .addClass（'ui-icon-triangle-1-e'）
 .closest（'h3'）。next（'div'）
 .hide（）; 
 $ b $（'。expand'）。text（'expand all'）。unbind（'click'）。bind（'click'，expandAll）; （''手风琴'）。accordion（'destroy'）。accordion（）; 
} 
  

和小提琴

http://jsfiddle.net/wa9Dz/1/

Well, this question is next version of my earlier question.

As I have all links collapsed, I want to create one button OR link saying "Show All", on clicking it will make all links active in accordion i.e. I want to view data of all links. Also need to create one button OR link saying "Hide All" which will make collapsed state as earlier.

Collapsed State

+++++++++++++++++++++++++++++++++++++++
+   Link 1                            +
+   Link 2                            +
+   Link 3                            +
+   Link 4                            +
+++++++++++++++++++++++++++++++++++++++

Should get after clicking "Show All"

+++++++++++++++++++++++++++++++++++++++
+   Link 1                            +
+     Link 1 line 1                   +
+     Link 1 line 2                   +
+     Link 1 line 3                   +
+   Link 2                            +
+     Link 2 line 1                   +
+     Link 2 line 2                   +
+     Link 2 line 3                   +
+   Link 3                            +
+     Link 3 line 1                   +
+     Link 3 line 2                   +
+   Link 4                            +
+     Link 4 line 1                   +
+     Link 4 line 2                   +
+++++++++++++++++++++++++++++++++++++++

How to do this?

解决方案

Here is your solution to expand and collapse all content panels.

function expandAll() {
    $('#accordion h3').removeClass('ui-state-default')
        .addClass('ui-state-active')
        .removeClass('ui-corner-all')
        .addClass('ui-corner-top')
        .attr('aria-expanded', 'true')
        .attr('aria-selected', 'true')
        .attr('tabIndex', 0)
    .find('span.ui-icon')
        .removeClass('ui-icon-triangle-1-e')
        .addClass('ui-icon-triangle-1-s')
    .closest('h3').next('div')
        .show();

    $('.expand').text('collapse all').unbind('click').bind('click', collapseAll);

    $('#accordion h3').bind('click.collapse', function() {
        collapseAll();
        $(this).click();
    });
}

function collapseAll() {
    $('#accordion h3').unbind('click.collapse');

    $('#accordion h3').removeClass('ui-state-active')
            .addClass('ui-state-default')
            .removeClass('ui-corner-top')
            .addClass('ui-corner-all')
            .attr('aria-expanded', 'false')
            .attr('aria-selected', 'false')
            .attr('tabIndex', -1)
        .find('span.ui-icon')
            .removeClass('ui-icon-triangle-1-s')
            .addClass('ui-icon-triangle-1-e')
        .closest('h3').next('div')
            .hide();

    $('.expand').text('expand all').unbind('click').bind('click', expandAll);

    $('#accordion').accordion('destroy').accordion();
}

and the fiddle

http://jsfiddle.net/wa9Dz/1/

这篇关于jQuery - Accordian（De-Collapse）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！