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

- medk

Answer 1

对于您的第二个问题，您可以切换一个名为“disabled”的类，例如：

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

我猜你的第一个问题可以使用CSS来解决，使用display: none或display: block

- Wim Mertens

---

在我看来，最好只需添加现有的 ui-state-disabled 类，就像 jQuery UI 对任何禁用的小部件元素所做的那样。这样，您的 CSS 就与 jQuery UI 应用的任何 CSS 一致。没有必要重新发明轮子。 :) - BobRodes

@BobRodes 我在某种程度上同意。对于像手风琴这样简单的东西，我更倾向于不使用任何大型的jQuery库。当然，如果你使用jQuery UI，你可以使用它，但本质上来说，结果是一样的。一小段jQuery代码和一些CSS足够了，我猜这个答案对其他人也可能有用，不必依赖于jQuery UI... - Wim Mertens

我也同意你的观点。我的意思并不是说你的回答没有用处，尤其是对于那些没有使用整个框架的人来说。我只是想说，没有必要创建已经存在的功能，这在某种程度上是原则问题。使用现有的类的部分原因是它在整个框架中保持一致性。如果OP决定使用“禁用”选项禁用整个手风琴，则不透明度将与添加您的“disable”类时相差0.05。虽然很小，但艺术家内心深处会感到不安。 :) - BobRodes

Answer 2

对于第一个问题，你已经有了现成的答案：

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

可折叠指可以折叠当前焦点的面板，将active设置为false表示没有任何活动状态。

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

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

myH3是你想要禁用的特定H3标题元素的id。 我会让你自己确定哪些元素不是当前活动元素的逻辑。

顺便说一下，ui-state-disabled类将元素的不透明度降低到0.35。 另外，如果您的标题面板中有按钮之类的东西，请记住，如果您禁用标题，则它们不会被禁用。 如果您明确禁用它们，则它们的不透明度将减少0.35 * 0.35，或者为0.1225，非常微弱。 如果您希望在禁用容器时保持包含项目的不透明度与容器一致，请向包含项目添加一个类，并使用CSS将不透明度设置为1。

- BobRodes