jQuery-Mobile可折叠slideDown效果

Posted 2023-05-08

【中文标题】jQuery-Mobile可折叠slideDown效果

【英文标题】：JQuery-Mobile collapsible slideDown effect

【发布时间】：2012-01-21 02:35:02

【问题描述】：

我想在带有data-role='collapsible' 的div 中添加slideDown 或slideUp 效果，因此它不会立即打开，而是逐渐打开。

我试过这个：

$('#my-collapsible').live('expand', function()       
    $('#my-collapsible .ui-collapsible-content').slideDown(2000);
);    
$('#my-collapsible').live('collapse', function() 
    $('#my-collapsible .ui-collapsible-content').slideUp(2000);
);

但它仍然会毫不拖延地打开和关闭。

任何人都知道我应该如何调用这些 slideDown 和 slideUp 方法吗？

【参考方案1】：

现场示例：

http://jsfiddle.net/6txWy/6/ http://jsfiddle.net/6txWy/7/

JS

$('#my-collaspible').bind('expand', function () 
    $(this).children().slideDown(2000);
).bind('collapse', function () 
    $(this).children().next().slideUp(2000);
);

html

<div data-role="page">
    <div data-role="content">
        <div data-role="collapsible" id="my-collaspible">
            <h3>My Title</h3>
            <p>My Body</p>
        </div>
    </div>
</div>

【讨论】：

注意fiddle中的JS是加载在body底部，而不是头部。

【参考方案2】：

由于某种原因，Phill 的解决方案在我的环境中不起作用，但稍作修改的版本可以，也许有人会使用这个：

$(document).on('expand', '.ui-collapsible', function() 
    $(this).children().next().hide();
    $(this).children().next().slideDown(200);
)

$(document).on('collapse', '.ui-collapsible', function() 
    $(this).children().next().slideUp(200);
);

这也直接适用于 jquery mobile 中的所有可折叠元素，因为它使用所有可折叠元素都有的 .ui-collapsible 选择器

【参考方案3】：

也许是个老问题，但 jQuery Mobile 从那时起发生了很大变化。

下面是一个关于为可折叠集设置动画的工作示例： http://jsfiddle.net/jerone/gsNzT/

/*\
Animate collapsible set;
\*/
$(document).one("pagebeforechange", function () 

    // 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;
        );
    

    // init;
    animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']"));
);

【讨论】：

这在 jQuery Mobile 1.3.1 上效果很好。感谢更新功能

确认使用 jQuery 2.0 和 jQuery Mobile 1.3.1 jsfiddle.net/jerone/gsNzT/104

【参考方案4】：

这是我的秋千，我需要嵌套的东西。

 // look for the ui-collapsible-content and collapse that
 // also need the event (which is an arg) to stop the outer expander from taking action. 
 $(document).on('expand', '.ui-collapsible', function(event) 
     var contentDiv = $(this).children('.ui-collapsible-content');
     contentDiv.hide();
     contentDiv.slideDown(300);
     event.stopPropagation(); // don't bubble up
 )

 $(document).on('collapse', '.ui-collapsible', function(event) 
         var contentDiv = $(this).children('.ui-collapsible-content');
         contentDiv.slideUp(300);
     event.stopPropagation(); // don't bubble up
 );

【参考方案5】：

这是 jerone 对 jQuery Mobile 1.4 的出色回答（事件名称略有变化，data-role="collapsible-set" 现在是 data-role="collapsibleset"）：

/*\
Animate collapsible set;
\*/
$( document ).one( 'pagecreate', function() 

  // animation speed;
  var animationSpeed = 500;

  function animateCollapsibleSet( elm ) 

    // can attach events only one time, otherwise we create infinity loop;
    elm.one( 'collapsibleexpand', function() 

      // hide the other collapsibles first;
      $( this ).parent().find( '.ui-collapsible-content' ).not( '.ui-collapsible-content-collapsed' ).trigger( 'collapsiblecollapse' );

      // animate show on collapsible;
      $( this ).find( '.ui-collapsible-content' ).slideDown( animationSpeed, function() 

        // trigger original event and attach the animation again;
        animateCollapsibleSet( $( this ).parent().trigger( 'collapsibleexpand' ) );
       );

      // we do our own call to the original event;
      return false;
     ).one( 'collapsiblecollapse', function() 

      // animate hide on collapsible;
      $( this ).find( '.ui-collapsible-content' ).slideUp( animationSpeed, function() 

        // trigger original event;
        $( this ).parent().trigger( 'collapsiblecollapse' );
       );

      // we do our own call to the original event;
      return false;
     );
  

  // init;
  animateCollapsibleSet( $( '[data-role="collapsibleset"] > [data-role="collapsible"]' ) );
 );

【讨论】：

适用于（至少部分地）与 jQM 1.4.3 并从底部的 init 行中删除 [data-role="collapsibleset"] > 使其也适用于可折叠（不在集合中） - 尽管我有一个问题嵌套可折叠，它会再次自动折叠 - 但这可能与我的项目中的其他一些单独的代码/触发器有关