Question

我的jQuery mobile 1.4.0应用程序中有以下可折叠集，我需要在展开和关闭时为此可折叠集添加动画，我已经尝试过这段代码并且它在jsfiddle中工作正常，这是我的{ {3}}，但问题是动画在我的应用程序中无法使用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中，我通过向可折叠集添加类.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 （基于Omar在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);
        }

    });
});

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

2 个答案: