本文介绍了可折叠集的自定义动画在jQuerymobile 1.4.0中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在jQuery mobile 1.4.0应用程序中具有以下可折叠集，在展开和关闭时需要向该可折叠集添加动画，我已经在jsfiddle中尝试了此代码并可以正常使用，这是我的 jsfiddle ，但是问题是动画无法在我的应用程序中使用jquery mobile 1.4.0播放.如何使此动画在jQuery mobile 1.4.0上正常工作?请帮助我..
I have the following collapsible set in my jQuery mobile 1.4.0 App, I need to add an animation to this collapsible set when its expanded and closed , I have tried this code and its working ok in jsfiddle ,this is my jsfiddle ,but The problem is that the animation didn't work on my app with jquery mobile 1.4.0 . How can i make this animation works on jQuery mobile 1.4.0? please help me ..
动画的javascript代码
the javascript code for animation
<script>
$('document').on('pageinit',function(){
animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']"));
});
// animation speed;
var animationSpeed = 200;
function animateCollapsibleSet(elm)
{
// can attach events only one time, otherwise we create infinity loop;
elm.one("expand", function() {
// hide the other collapsibles first;
$(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content- collapsed").trigger("collapse");
// animate show on collapsible;
$(this).find(".ui-collapsible-content").slideDown(animationSpeed, function() {
// trigger original event and attach the animation again;
animateCollapsibleSet($(this).parent().trigger("expand"));
});
// we do our own call to the original event;
return false;
}).one("collapse", function()
{
// animate hide on collapsible;
$(this).find(".ui-collapsible-content").slideUp(animationSpeed, function() {
// trigger original event;
$(this).parent().trigger("collapse");
});
// we do our own call to the original event;
return false;
});
}
</script>
推荐答案
将多个国家/地区设置为可折叠式(不在一组中)，并且每个国家/地区都包含一个具有多个可折叠式的可折叠组.标记看起来像这样:
Given multiple countries as collapsibles (not in a set) and each country contains a collapsible set with several collapsibles. The markup looks like this:
<div data-role="content">
<div data-role="collapsible" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
<h3 ><div>Country 1</div></h3>
<div data-role="collapsible-set" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates">
<div data-role="collapsible" >
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font></li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
<div data-role="collapsible">
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font> </li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
</div>
</div>
<div data-role="collapsible" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
<h3 ><div>Country 2</div></h3>
<div data-role="collapsible-set" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates">
<div data-role="collapsible" >
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font></li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
<div data-role="collapsible">
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font> </li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
</div>
</div>
</div>
在javascript中，我通过向可折叠集添加类.governorates来与第二层可折叠集分开处理国家展开/折叠
In javascript, I handle the country expand/collapse separately from the second level collapsible sets by adding a class .governorates to the collapsible sets
$(document).on('pagecreate', function () {
$(".governorates .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
$(".ui-collapsible-content", current).slideDown("fast", function () {
current.trigger("collapsibleexpand");
//hide previously expanded
$(".governorates .ui-collapsible-content-collapsed").slideUp('fast');
});
} else {
$(".ui-collapsible-content", current).slideUp("fast", function () {
current.trigger("collapsiblecollapse");
});
}
});
$(".col .ui-collapsible-heading-toggle").not(".governorates .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
$(".ui-collapsible-content", current).not(".governorates .ui-collapsible-content").slideDown("fast", function () {
current.trigger("collapsibleexpand");
});
} else {
$(".ui-collapsible-content", current).not(".governorates .ui-collapsible-content").slideUp("fast", function () {
current.trigger("collapsiblecollapse");
});
}
});
});
这篇关于可折叠集的自定义动画在jQuerymobile 1.4.0中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！