如何限制可折叠项目保持扩展，除非我单击其他可折叠项目以展开但不折叠可折叠项目本身 [英] How do I restrict a collapsible item to stay expanded unless i click the other collapsible items to expand but not the collapsible item itself

问题描述

我正在移动网站上工作并使用jquerymobile。
手风琴中有4个可折叠物品。我希望其中一个项目能够保持扩展。如果我单击展开的项目，它将折叠（我不想折叠此项目）。
如果我点击任何其他折叠项目，最后一个展开的项目将折叠（没关系）。

I am working on a mobile website and using jquerymobile. I have 4 collapsible items in an accordion. I want to have one of the items to stay expanded. If i click the expanded item, it is collapsed (i do not want to collapse this item). If i click any other collapsed item, the last expanded item is collapsed (thats ok).

我将非常感谢您的帮助。手风琴类别的动态javascript代码如下：

I will appreciate your help. The dynamic javascript code for accordion categories is given bellow:

function create-accordion(categories)
    {
        category_array = categories;
        jQuery.each(categories, function( index, value )
        {
            var div =  '<div data-role="collapsible"  class="custom-collapsible"  ';
            if(index == 0)
                div += 'data-collapsed="false"';
            div += '>';

            div += '<h3 style:"padding:0px; margin:0px;"> ' + value.name + '</h3>\
                        <div class= "collapsable-limit-theme">\
                            <div data-role="content" style="padding:0px; margin:0px;">\
                                <div class="ui-grid-c, Grid" id="Grid' + value.id + '">\
                                </div>\
                            </div>\
                        </div>\
                    </div>';

            $($('#accord'), this).append(div);
        });

        $( "#accord" ).collapsibleset( "refresh" );
    }

和html代码

<div id="accord" data-role="collapsible-set" border-radius="0px" >
        </div>

问候

推荐答案

您需要听取点击 .ui-collapsible-heading-toggle 并检查点击的可折叠是折叠还是展开。如果折叠折叠，它将有一个类 .ui-collapsibe-collapsed 。

You need to listen to click on .ui-collapsible-heading-toggle and check if the clicked collapsible is either collapsed or expanded. If the collapsible is collapsed, it will have a class .ui-collapsibe-collapsed.

如果展开的可折叠单击，它将防止返回false 折叠自身，否则，它将折叠所有展开的。

If the expanded collapsible is clicked, it will prevent collapsing itself by return false, otherwise, it will collapse all expanded ones.

$(".ui-collapsible-heading-toggle").on("click", function () {

    // clicked collaspible
    var collapsible = $(this).closest(".ui-collapsible");

    // check if its whether collapsed
    if (collapsible.hasClass("ui-collapsible-collapsed")) {

        // collapse expanded collapsibles
        $(".ui-collapsible").not(collapsible).trigger("collapse");
    } else {
        // keep expanded clicked collapsible as is
        return false;
    }
});

演示

Demo

这篇关于如何限制可折叠项目保持扩展，除非我单击其他可折叠项目以展开但不折叠可折叠项目本身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！