- 首页
- 前端开发
- 如何限制可折叠项目保持展开状态，除非我单击其他可折叠项目以展开而不是可折叠项目本身
如何限制可折叠项目保持展开状态，除非我单击其他可折叠项目以展开而不是可折叠项目本身
[英] 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 = 类别；jQuery.each(categories, function( index, value ){var div = '<div data-role="collapsible" class="custom-collapsible" ';如果(索引== 0)div += 'data-collapsed="false"';div += '>';div += '<h3 style:"padding:0px; margin:0px;">' + 值.名称 + '<div class="collapsable-limit-theme"><div data-role="content" style="padding:0px; margin:0px;"><div class="ui-grid-c, Grid" id="Grid' + value.id + '">
';$($('#accord'), this).append(div);});$("#accord").collapsibleset("刷新");}
和html代码
<div id="accord" data-role="collapsible-set" border-radius="0px" >
问候
解决方案
你需要听点击.ui-collapsible-heading-toggle 并检查点击的可折叠是折叠还是展开.如果可折叠对象被折叠，它将有一个 .ui-collapsibe-collapsed 类.
如果展开的可折叠被点击，它会通过return false防止自身折叠，否则将折叠所有展开的.
$(".ui-collapsible-heading-toggle").on("click", function () {//点击可折叠var collapsible = $(this).closest(".ui-collapsible");//检查它是否折叠如果(collapsible.hasClass(ui-collapsible-collapsed")){//折叠展开的可折叠物品$(".ui-collapsible").not(collapsible).trigger("collapse");} 别的 {//保持展开的点击可折叠返回假；}});
<块引用>
演示
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).
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" );
}
and the html code
<div id="accord" data-role="collapsible-set" border-radius="0px" >
</div>
Regards
解决方案
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.
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屋！
