1

我在我的 jQuery mobile 1.4.0 应用程序中有以下可折叠集，当它展开和关闭时，我需要向这个可折叠集添加动画，我已经尝试过这段代码并且它在 jsfiddle 中工作正常，这是我的 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>
4

2 回答 2

3

给定多个国家作为可折叠物品（不在一个集合中），并且每个国家/地区都包含一个带有多个可折叠物品的可折叠集合。标记如下所示：

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

.governorates在javascript中，我通过向可折叠集添加一个类来处理国家/地区扩展/折叠与二级可折叠集

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

这是一个工作演示（基于 Omar 在 OP 评论线程中的初始工作）。

于 2014-01-29T01:35:46.013 回答
0

我知道已经选择了一个答案，但是，在这里我分叉了 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);
        }

    });
});
于 2014-07-14T18:07:55.897 回答