jQuery UI Accordion展开/折叠全部-Java 学习之路

我正在项目中使用jQuery UI Accordion（它确实是 not allow more than one item open at a time ） . 使用手风琴是合适的，因为我通常只希望一次打开一个面板 .

但是，我需要提供一个“全部展开”链接，单击该按钮可切换到“全部折叠” . 我不想在这个要求周围自定义几乎相同的手风琴功能，所以我想要一些JS来实现这一点，同时保持Accordion组件的使用 .

Question: 在使用jQuery UI "Accordion"组件为标准功能提供支持的同时，需要哪些JavaScript / jQuery才能实现这一目标？

这是一个小提琴：http://jsfiddle.net/alecrust/a6Cu7/

12 回答

在jQuery UI论坛中，你不应该使用手风琴 .

如果你想看起来像手风琴一样的东西，那很好 . 使用他们的类来设置它们的样式，并实现您需要的任何功能 . 然后添加一个按钮来打开或关闭它们都非常简单 . Example

HTML

通过使用jquery-ui类，我们将手风琴看起来就像“真正的”手风琴一样 .

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        Content 1
    </div>
</div>

Roll your own accordions

大多数情况下，我们只需要手风琴 Headers 来切换以下兄弟的状态，这是它的内容区域 . 我们还添加了两个自定义事件“show”和“hide”，我们将在稍后介绍 .

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');

    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

Expand/Collapse All

我们使用布尔 isAllOpen 标志来标记按钮何时被更改，这可能就像一个类或更大的插件框架上的状态变量一样容易 .

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

Swap the button when "all open"

由于我们定制的“show”和“hide”事件，我们可以在面板变化时收听 . 唯一的特殊情况是“它们都打开”，如果是，按钮应该是“全部折叠”，如果不是，则应该“全部展开” .

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});

Edit for comment: 维护"1 panel open only"除非你点击"Expand all"按钮实际上要容易得多 . Example

回复于 2024-04-29T09:42:45+08:00

我的解决方案：

在真实的项目中工作 .

$(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

回复于 2024-04-29T09:42:45+08:00

18
其中很多似乎过于复杂 . 我通过以下方式实现了我想要的目标：
```
$(".ui-accordion-content").show();
```
JSFiddle
回复于 2024-04-29T09:42:45+08:00

最后，我发现这是考虑要求的最佳解决方案：

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});

回复于 2024-04-29T09:42:45+08:00

0
我不相信你可以用手风琴做到这一点，因为它是专门设计的，保留了最多只能打开一个项目的属性 . 但是，即使你说你不想重新实现手风琴，你也可能过度估计所涉及的复杂性 .

考虑以下场景，其中有一个垂直的元素堆栈，
```
++++++++++++++++++++
+     Header 1     +
++++++++++++++++++++
+                  +
+      Item 1      +
+                  +
++++++++++++++++++++
+     Header 2     +
++++++++++++++++++++
+                  +
+      Item 2      +
+                  +
++++++++++++++++++++
```
如果你很懒，你可以使用表来构建它，否则，适当风格的DIV也可以工作 .

每个项目块可以具有 itemBlock 类 . 单击 Headers 将导致隐藏类itemBlock的所有元素（ $(".itemBlock").hide() ） . 然后，您可以使用jquery slideDown() 函数展开 Headers 下方的项目 . 现在你已经实现了手风琴 .

要展开所有项目，只需使用 $(".itemBlock").show() 或如果您想要动画， $(".itemBlock").slideDown(500) . 要隐藏所有项目，只需使用 $(".itemBlock").hide() .
回复于 2024-04-29T09:42:45+08:00

这是由Sinetheta转换为jQuery插件的代码：将代码保存到js文件下面 .

$.fn.collapsible = function() {
    $(this).addClass("ui-accordion ui-widget ui-helper-reset");
    var headers = $(this).children("h3");
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
    headers.click(function() {
        var header = $(this);
        var panel = $(this).next();
        var isOpen = panel.is(":visible");
        if(isOpen)  {
            panel.slideUp("fast", function() {
                panel.hide();
                header.removeClass("ui-state-active")
                    .addClass("ui-state-default")
                    .children("span").removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-triangle-1-e");
          });
        }
        else {
            panel.slideDown("fast", function() {
                panel.show();
                header.removeClass("ui-state-default")
                    .addClass("ui-state-active")
                    .children("span").removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-triangle-1-s");
          });
        }
    });
};

在你的UI页面中引用它并调用类似于jQuery的手风琴调用：

$("#accordion").collapsible();

看起来更干净，并避免任何类添加到标记 .

回复于 2024-04-29T09:42:45+08:00

5

试试这个jquery-multi-open-accordion，可能对你有帮助

回复于 2024-04-29T09:42:45+08:00

我之前的第二个bigvax评论，但你需要确保你添加

jQuery("#jQueryUIAccordion").({ active: false,
                              collapsible: true });

否则你在折叠它们之后就无法打开第一支手风琴 .

$('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
   }

回复于 2024-04-29T09:42:45+08:00

Yes, it is possible. Put all div in separate accordion class as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

        $(function () {
            $("input[type=submit], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
            $("#tabs").tabs();
            $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0



            });
        });

function expandAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0

            });

            return false;   
}

function collapseAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: false



            });
            return false;
}
</script>



<div class="accordion">
  <h3>Toggle 1</h3>
  <div >
    <p>text1.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 2</h3>
  <div >
    <p>text2.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 3</h3>
  <div >
    <p>text3.</p>
  </div>
</div>

回复于 2024-04-29T09:42:45+08:00

0

你可以尝试这个轻量级的小插件 .

它允许您根据您的要求进行自定义 . 它将具有展开/折叠功能 .

URL: http://accordion-cd.blogspot.com/

回复于 2024-04-29T09:42:45+08:00

我发现AlecRust的解决方案非常有用，但我添加一些东西来解决一个问题：当你点击一个手风琴来展开它然后你点击按钮展开时，它们都将被打开 . 但是，如果你再次点击按钮折叠，那么之前展开的单个手风琴将不会崩溃 .

我已经使用了imageButton，但您也可以将该逻辑应用于按钮 .

/*** Expand all ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();

    return false;
});

/*** Collapse all ***/
$(".collapseAll").click(function (event) {
    $('.accordion').accordion({
        collapsible: true,
        active: false
    });

    $('.accordion .ui-accordion-header').next().slideUp();

    return false;
});

此外，如果手风琴中有手风琴并且您只想在第二级扩展所有手风琴，您可以添加查询：

/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();

    return false;
});

回复于 2024-04-29T09:42:45+08:00

1
使用关于Taifun的示例，我修改为允许展开和折叠 .

... //连接展开/折叠全部
```
var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});
```
回复于 2024-04-29T09:42:45+08:00

jQuery UI Accordion展开/折叠全部

12 回答

相关问题