Jquery mobile 可折叠集的自定义动画在jQuerymobile 1.4.0中不起作用

我在我的jQuery mobile 1.4.0应用程序中有以下可折叠集，我需要在其展开和关闭时向该可折叠集添加动画，我已经尝试了该代码，它在JSFIDLE中工作正常，这是我的，但问题是该动画在我的jQuery mobile 1.4.0应用程序中不起作用。如何使此动画在jQuery mobile 1.4.0上工作？请帮帮我

动画的javascript代码

<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>

$（'document'）。在（'pageinit'，function（）{
animateCollapsibleSet（$（“[data role='collapsible-set']>[data role='collapsible']”）；
});
//动画速度；
var animationSpeed=200；
函数animateCollapsibleSet（elm）
{
//只能附加一次事件，否则我们将创建无限循环；
elm.one（“扩展”，函数（）{
//先隐藏其他可折叠的部分；
$（this.parent（）.find（“.ui可折叠内容”）.not（“.ui可折叠内容-折叠”）.trigger（“折叠”）；
//在可折叠屏幕上显示动画；
$（this）.find（“.ui可折叠内容”）.slideDown（animationSpeed，function（））{
//触发原始事件并再次附加动画；
animateCollapsibleSet（$（this.parent（）.trigger（“expand”））；
});
//我们为最初的事件做我们自己的呼吁；
返回false；
}).1（“崩溃”，函数（）
{
//在可折叠上设置隐藏动画；
$（this）.find（“.ui可折叠内容”）.slideUp（animationSpeed，function（））{
//触发原始事件；
$（this.parent（）.trigger（“collapse”）；
});
//我们为最初的事件做我们自己的呼吁；
返回false；
});
}

将多个国家/地区指定为可折叠（不在一个集合中），并且每个国家/地区包含一个可折叠集合和多个可折叠集合。标记如下所示：

<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>

下面是一个正在运行的（基于Omar在OP评论线程中的初始工作）

---

我知道已经选择了一个答案，但是，在这里我用了ezanker的小提琴，做了同样的事情，但代码更少

---

检查这个@OmarThanks它起作用了，但有两个问题：第一个问题，如果我展开省1，然后展开省2，省1没有自动关闭，我需要点击它两次才能关闭它。如果省1被展开，我们如何在点击示例省2时将此代码更新为前一个代码将自动关闭。对Omar的代码进行小更新以关闭其他打开的可折叠文件：这是您的更新：@Omar谢谢，我已将其添加为答案。你最初的小提琴肯定让我的工作更轻松；）留给后代的两点意见：1）我认为触发代码中的

展开

和

折叠

事件是一种双重选择。2） jQuery的

slide

函数直接将样式添加到元素中，因此

collapsable（“collapse”）

的后续调用不再正常工作-必须使用

removeAttr（“样式”）

或在分别调用

collapse

或

expand

之前，始终执行另一个

slideUp

/

slideDown

。

$(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");
            });
        }
    }); 
});

$(document).on('pageinit', function(){
    $("[data-role='collapsible']").collapsible({

        collapse: function( event, ui ) {
            $(this).children().next().slideUp(150);
        },
        expand: function( event, ui ) {
            $(this).children().next().hide();
            $(this).children().next().slideDown(150);
        }

    });
});