首页 文章

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

提问于
浏览 次
11

我正在尝试创建一个手风琴，只需单击一下即可展开/折叠所有部分 . 我还需要用户能够打开和关闭一次打开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>

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

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

有什么建议？我是否需要强制手风琴在关闭时失去焦点？我怎么做到这一点？

jquery-ui jquery-ui-accordion

4 回答

  • 2

    尝试在页面上覆盖我的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();
}
    回复于
  • 3

    解决方案与所有开放式面板一起实施手风琴 . 面板是静态的，无法关闭 .

    不要用手风琴小部件初始化手风琴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");
    回复于
  • 0

    这是我的答案〜希望对它有所帮助

    对于多个打开，你可以这样做，通过使用现有的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

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

    它将提供很少的选项，我们可以根据我们的要求进行修改 .

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

    回复于

相关问题