jQuery UI 手风琴控制

Question

我有一个 jQuery UI 手风琴，其中每个手风琴部分都有许多复选框。

1- 我希望手风琴开始时全部折叠并全部启用。

2- 当用户单击任何复选框时，手风琴将被禁用，因此用户可以继续仅选中该组中的复选框。

不，要添加以开始全部折叠的选项的名称是什么？我的脚本是这样的：

$(function() {
    $("#accordion" ).accordion({
        heightStyle: "content",
        animate: 1,
        collapsible: true
    });
});

什么是触发禁用手风琴的动作？

$(document).on('change', '.checkbox', function(event) {
    var check = $(this);
    var len = $('.checkbox:checked').length;
    if (check.is(':checked')) {
        $('#accordion').MAKE_IT_DISABLED;
    } else {
        if (len == 0) {
            $('#accordion').MAKE_IT_ENABLED;
        }
    }
});

Answer 1

对于你的第二个问题，你可以切换一个名为 disabled 的 class 例如：

.disabled {
    cursor: default;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .3;
    pointer-events: none;
}

我猜你可以使用 css 作为你的第一个问题，使用 display: none 或 display: block

Answer 2

对于第一个问题，您有 ready-made 个答案：

$("#accordion" ).accordion({
    collapsible: true,
    active: false
});

Collapsible 表示您可以折叠当前焦点的面板，将 active 设置为 false 表示 none 处于活动状态。

虽然可以使用 CSS 不透明度属性，但更简单的方法是向项目添加适当的 class。您可以通过将 disabled 选项设置为 true 来禁用整个手风琴，但您只想禁用您不在其中的面板。要禁用单个面板：

$('#accordion #myH3').addClass('ui-state-disabled');

其中 myH3 是您要禁用的特定 H3 header 元素的 ID。我将留给您确定确定哪些元素不是当前活动元素的逻辑。

顺便说一句，ui-state-disabled class 将元素的不透明度降低到 .35。此外，如果您的 header 面板中有按钮之类的东西，请记住，如果您禁用 header，它们将不会被禁用。而且，如果您特别禁用它们，它们的不透明度将降低 0.35*.35，或降低到非常微弱的 0.1225。如果你想在禁用容器时保持包含项的不透明度与容器一致，在包含项中添加一个class并使用CSS将不透明度设置为1。

jQuery UI 手风琴控制

jQuery UI Accordion Control

jquery

jquery-ui

jquery-ui-accordion