[英]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个可折叠物品。 我想让其中一项保持扩展。 如果我单击展开的项目,则它被折叠(我不想折叠该项目)。 如果我单击任何其他折叠的项目,则最后一个展开的项目将被折叠(没关系)。
感谢您的帮助。 下面给出了用于手风琴类别的动态javascript代码:
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
。
如果单击展开的可折叠对象,则将通过return false
来防止自身折叠,否则,它将折叠所有展开的对象。
$(".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;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.