jquery ui accordion - 多种手风琴扩展/解决所有风格的问题

时间:2011-02-01 21:46:24

标签: jquery-ui jquery-ui-accordion

我正在尝试创建一个手风琴,只需单击一下即可展开/折叠所有部分。我还需要用户能够打开和关闭一次打开0-n部分的部分。在stackoverflow和jquery论坛上使用这里的几个讨论,这是我提出的解决方案: 我已将每个部分实现为自己的手风琴,其中每个都设置为collapsible = true。

<html>
    <head>
        <title>Accordion Test</title>

        <script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>

        <link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css"  type="text/css" />
        <link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
    </head>

<body>
        <a onClick="expandAll()">Expand All</a>
        <br>
        <a onClick="collapseAll()">Collapse All</a>
            <div id="accordion1" class="accord">
            <h5><a href="#">section 1</a></h5>
            <div>
                    section 1 text  
            </div>
            </div>

            <!-- orders section -->
            <div id="accordion2" class="accord">
            <h5><a href="#">section 2</a></h5>
            <div>
                    section 2 text  
            </div>
            </div>

            <!--  section 3 -->
            <div id="accordion3" class="accord">
            <h5><a href="#">section 3</a></h5>
            <div>
                    section 3 text  
            </div>
            </div>

            <!-- section 4 -->
            <div id="accordion4">
            <h5><a href="#">section 4</a></h5>
            <div>
                    section 4 text                  
            </div>
            </div>


</body>
</html>


<script type="text/javascript">

$(function() {
    $('#accordion1').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false
    });
});
$(function() {
    $('#accordion2').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});
$(function() {
    $('#accordion3').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});
$(function() {
    $('#accordion4').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});

</script>

<script type="text/javascript">
$(document).ready(function() {

})

function expandAll() {
    alert("calling expandAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":not(:has(.ui-state-active))")
        .accordion("activate", 0);
}

function collapseAll() {
    alert("calling collapseAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":has(.ui-state-active)")
        .accordion("activate", -1);
}

</script>

我遇到的问题是,当我点击打开部分的标题时,该部分按预期折叠,但标题仍然具有“ui-state-focus”类,直到我点击其他地方页。所以我在ui中看到的是刚关闭的部分的标题与我的悬停效果具有相同的背景颜色,直到我点击其他地方,并且它转换为“默认的,未聚焦的”颜色。

此外,当我使用“全部折叠”链接时,所有内容在Firefox中看起来都很棒。在IE中,最后一个节标题具有相同的悬停焦点着色。

有什么建议吗?我是否需要强制手风琴在关闭时失去焦点?我将如何实现这一目标?

4 个答案:

答案 0 :(得分:3)

尝试在页面上覆盖我的jquery-ui样式,并试图破解手风琴javascript以删除ui-state-focus类之后,一个简单的解决方案就出现了。

因为当我点击页面上的其他位置时,我的页面显示了预期的行为,所以我使用blur()来失去焦点。

$(document).ready(function() {
    // forces lose focus when accordion section closed. IE and FF.
    $(".ui-accordion-header").click(function(){
          $(this).blur();
        });

})

为了解决IE中崩溃的所有问题,我在我的collapseAll()方法中添加了1行。

function collapseAll() {
    alert("calling collapseAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":has(.ui-state-active)")
        .accordion("activate", -1);
    $(".ui-accordion-header").blur();
}

答案 1 :(得分:3)

使用所有开放式面板实现手风琴的解决方案。面板是静态的,无法关闭。

不要用accordion小部件初始化accordion div!

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
  .find('h3')
  .addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top")
  .prepend('<span class="ui-icon ui-icon-triangle-1-s"/>')
  .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");

答案 2 :(得分:2)

这是我的答案〜希望得到帮助

对于多个打开,你可以这样做,通过使用现有的jquery UI只需添加一个选项beforeActivate:

我的代码如下:

$( "#accordion" ).accordion({
        header: "> div > h3",
        autoHeight: false,
        collapsible: true,
        active: false,
        beforeActivate: function(event, ui) {
             // The accordion believes a panel is being opened
            if (ui.newHeader[0]) {
                var currHeader  = ui.newHeader;
                var currContent = currHeader.next('.ui-accordion-content');
             // The accordion believes a panel is being closed
            } else {
                var currHeader  = ui.oldHeader;
                var currContent = currHeader.next('.ui-accordion-content');
            }
             // Since we've changed the default behavior, this detects the actual status
            var isPanelSelected = currHeader.attr('aria-selected') == 'true';

             // Toggle the panel's header
            currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

            // Toggle the panel's icon
            currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

             // Toggle the panel's content
            currContent.toggleClass('accordion-content-active',!isPanelSelected)    
            if (isPanelSelected) { currContent.slideUp('fast'); }  else { currContent.slideDown('fast'); }

            return false; // Cancels the default action
        }
    });

参考:jQuery UI accordion that keeps multiple sections open?

并且功能崩溃并展开

function accordion_expand_all()
{
  var sections = $('#accordion').find("h3");
  sections.each(function(index, section){
    if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
      $(section).click();
    }
  });

}

function accordion_collapse_all()
{
  var sections = $('#accordion').find("h3");
  sections.each(function(index, section){
    if ($(section).hasClass('ui-state-active')) {
      $(section).click();
    }
  });
}

就是这样..

答案 3 :(得分:0)

你可以尝试这个小巧轻便的插件。

我们可以根据自己的要求修改几个选项。

网址 http://accordion-cd.blogspot.com/