可摺疊設置不工作在jQuerymobile 1.4.0的自定義動畫

Question

我在我的jQuery手機1.4.0應用程序中有以下可摺疊設置，我需要添加一個動畫到這個可摺疊設置時，它的展開和關閉，我已經試過這個代碼和其在jsfiddle中的工作正常，這是我的jsfiddle，但問題是動畫不適用於我的應用程序與jQuery的移動1.4.0。我如何使這個動畫在jQuery移動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

鑑於多個國家爲collapsibles（不在一組），每個國家包含可壓縮集與幾個collapsibles。該標記看起來是這樣的：

<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該可收縮套

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

這裏是第二級可摺疊套分別崩潰一個工作DEMO（基於奧馬爾在OP評論線索的初步工作）。

Answer 2

我知道一個答案已經被選中，但是，在這裏我已經分叉了ezanker的小提琴，做同樣的事情，但代碼少。

http://jsfiddle.net/fussycashew/EZ2Kx/

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

    }); 
});