JQuery-Mobile可折叠的slideDown效果

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

我试过这个：

 $('#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方法？

Answer 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

 
 
 
 
My Title
 
My Body
 
 
  

Answer 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选择器，所有可折叠元素都具有

Answer 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']")); }); 

Answer 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 }); 

Answer 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"]' ) ); } );