jquery ui 手风琴 - 多个手风琴展开/折叠全部 - 样式问题

发布于 2024-10-15 08:28:45 字数 3396 浏览 3 评论 0原文

我正在尝试创建一个手风琴，只需单击一下即可展开/折叠所有部分。我还需要用户能够打开和关闭一次打开 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”类，直到我单击页面上的其他位置。因此，我在用户界面中看到的是刚刚关闭的部分的标题与我的悬停效果具有相同的背景颜色，直到我单击其他位置，它才会切换为“默认，不聚焦”颜色。

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

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

原文

I'm attempting to create an accordion where I can expand/collapse all sections with a single click. I also need the ability for the user to open and close the sections having 0-n sections open at a time. Using several of the discussions here on stackoverflow and on jquery forums, here's the solution i've come up with:
I've implemented each section as it's own accordion, where each is set to 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>

The problem I'm running into, is when I click the header of an open section, the section is collapsed as expected, but the header still have the "ui-state-focus" class, until I click elsewhere on the page. So what I see in the ui is the header of section just closed has the same background color as my hover effect, until I click elsewhere, and it shifts to the 'default, not focused' color.

In addition, when I use the Collapse All link, all looks great in Firefox. In IE, the last section header has the same hover-focus coloring.

Any suggestions? Do I somehow need to force the accordion to lose focus when it is closed? How would I accomplish that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-10-22 08:28:45

在尝试覆盖页面上的 jquery-ui 样式，并尝试破解 Accordion 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 中的折叠所有问题，我在塌陷All() 方法中添加了 1 行。

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

After attempting to over-ride my jquery-ui styles on the page, and attempting to hack the accordion javascript to remove the ui-state-focus class, a simple solution came to light.

Because my page is displaying the expected behavior when I click else where on the page, I used blur() to lose focus.

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

})

To fix the collapse all issue in IE, I added 1 line to my collapseAll() method.

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

回复收藏 0 原文

帅气尐潴 2024-10-22 08:28:45

使用所有打开的面板实施手风琴的解决方案。面板是静态的且无法关闭。

不要使用手风琴小部件初始化手风琴 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");

Solution to implement accordion with all open panels. Panels are static and can't be closed.

Do not initialize accordion div with accordion widget!

$("#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 原文

不知所踪 2024-10-22 08:28:45

这是我的答案〜希望它对

多次打开有帮助，您可以通过使用现有的jquery UI来做到这一点，只需在Activate之前添加一个选项：

我的代码如下：

$( "#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 手风琴保持多个部分打开？

函数折叠和展开

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();
    }
  });
}

就是这样。

this is my answer~ hope its help

for multiple open you can do like this by using existing jquery UI just add in a options beforeActivate:

my code below:

$( "#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
        }
    });

refer from :jQuery UI accordion that keeps multiple sections open?

and the function collapse and expand

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();
    }
  });
}

that's it..

回复收藏 0 原文