jQuery移动可折叠集,一次打开多个?
是否可以使用jQuery mobile的可折叠集小部件的样式,但其功能与普通可折叠小部件类似(例如,允许在可折叠集中同时打开多个可折叠小部件)jQuery移动可折叠集,一次打开多个?,jquery,jquery-mobile,Jquery,Jquery Mobile,是否可以使用jQuery mobile的可折叠集小部件的样式,但其功能与普通可折叠小部件类似(例如,允许在可折叠集中同时打开多个可折叠小部件) 是的,这是可能的,但你必须像这样通过黑客攻击: $('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed') .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed") .find('
是的,这是可能的,但你必须像这样通过黑客攻击:
$('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed')
.attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
.find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');
您可以在一个集合中使用任意多个可折叠对象来执行此操作。不过,你必须以某种方式识别塌陷物
我是在表单中执行此操作的,所以我从表单错误表单字段开始,逐步向上到可折叠集:
var el = my_faulty_form_field;
el.attr('placeholder', YOUR_ERROR_MSG)
.closest('.ui-collapsible.ui-collapsible-collapsed')
.attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
.find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');
这可以通过在主事件完成后停止事件传播来实现
$('.collaps').bind('expand', function (evt) {
evt.stopImmediatePropagation();
})
$('.collaps').bind('collapse', function (evt) {
evt.stopImmediatePropagation();
});
collaps是为集合中的所有可折叠文件指定的类的名称。
那么,打开和关闭一个不会影响其余部分。谢谢您的解决方案-尽管我不得不做一些小改动才能使其正常工作:
stopImmediatePropagation
停止任何要执行的处理程序,因此不再展开或折叠任何处理程序
使用stopPropagation()代码>为我做这项工作:
$('.collaps').bind('expand', function (evt) {
evt.stopPropagation();
});
$('.collaps').bind('collapse', function (evt) {
evt.stopPropagation();
});
另一个解决方案是使用一个微小的hack,但没有任何类属性操作,即声明一个新的小部件,扩展可折叠集
,并解除不需要的事件处理程序的绑定
$.widget( "mobile.collapsiblegroup", $.mobile.collapsibleset, {
options: {
initSelector: ":jqmData(role='collapsible-group')"
},
_create: function() {
$.mobile.collapsibleset.prototype._create.call(this);
var $el = this.element;
if (!$el.jqmData('collapsiblebound2')) {
$el.jqmData('collapsiblebound2', true)
.unbind('expand')
.bind('expand', $._data($el.get(0), 'events')['collapse'][0]);
}
}
});
//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ) {
$.mobile.collapsiblegroup.prototype.enhanceWithin( e.target );
});
要使用它,只需将数据角色
更改为可折叠组
,而不是可折叠集
注意:这仅适用于jQuery 1.8+,对于较旧版本的更改
$.\u data($el.get(0),'events')
到$el.data('events')
您可以使用它来代替可折叠的集合或手风琴
“可折叠集”的区别在于,可以同时打开多个可折叠行
对frequent回答的补充说明:
$('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed')
.attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
.find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');
我加上这两行:
$( '.YOUR_COLLAPSIBLE_CLASS h2' ).removeClass( 'ui-collapsible-heading-collapsed' );
$( '.YOUR_COLLAPSIBLE_CLASS h2 a' ).removeClass( 'ui-icon-plus' ).addClass( 'ui-icon-minus' );
首先,您提供的链接来自alpha版本,请参阅更新的文档:您还可以使用自定义事件打开任何或所有可折叠的集合。您是否尝试阅读以下内容:查看jquery演示:?好吧,这是一个块,但功能是一样的。也就是说,不要把你的可折叠文件包在可折叠文件集中。