jquery-mobile - 折りたたみ可能なセットのカスタム アニメーションが jQuerymobile 1.4.0 で機能しない

Question

jQuery モバイル 1.4.0 アプリに次の折りたたみ可能なセットがあります。展開して閉じたときに、この折りたたみ可能なセットにアニメーションを追加する必要があります。このコードを試してみましたが、 jsfiddleで問題なく動作しました。問題は、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>

Answer 1

複数の国を (セットではなく) 折りたたみ可能なものとして指定し、それぞれの国にいくつかの折りたたみ可能なセットを含む折りたたみ可能なセットを含めます。マークアップは次のようになります。

<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 では、折りたたみ可能なセットにクラスを追加することで、第 2 レベルの折りたたみ可能なセットとは別に国の展開/折りたたみを処理.governoratesします。

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

ここに動作するデモがあります (OP コメント スレッドでの Omar の最初の作業に基づいています)。