jQuery：如何在没有jQuery UI的情况下重现Accordion的滑出效果？

我只是在学习jQuery，弄清楚什么是可能的，找到我的路。jQuery：如何在没有jQuery UI的情况下重现Accordion的滑出效果？

我想要一个div像手风琴一样“滑出”，但我不想支付jQuery UI下载的费用，并且我想让多个div在相同的位置打开时间。

它是如何工作的？在jquery.ui.accordion.js中，手风琴的滑出效果如何？我可以拨打.animate()将电话号码从display:none移至display:block吗？（我读过的动画仅适用于数字属性。）

2009-12-16 Cheeso

我正在学习各种各样的东西。我只使用jQuery - 没有UI，没有UI手风琴，没有UI效果 - 并获得了我想要的滑下效果。不确定这种视觉效果的术语。（我认为这是jQuery的一半挑战 - 我称之为各种效果）。我想也许有些人称之为“切换百叶窗”。

点击此处，查看效果：http://jsbin.com/ogape

这里的HTML片段

<div id="div0"> 
    <p id="intro"><a href="#" class='expander'>+</a> Introduction</p> 

    <div class='indented' style='display:none'> 
    <p > 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer 
     vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus, 
     sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam. 
    </p> 

    <p> Quisque pharetra lacus quis sapien. Duis 
     id est non wisi sagittis adipiscing. Nulla facilisi. Etiam quam erat, 
     lobortis eu, facilisis nec, blandit hendrerit, metus. Fusce 
     hendrerit. Nunc magna libero, sollicitudin non, vulputate non, ornare 
     id, nulla. Suspendisse potenti. Nullam in mauris. 
    </p> 
    </div> 
</div>

这是jQuery代码：

var slideOut = function(element){ 
     var parent = $(element).parent().parent(); // outer div 
     var dList = parent.children("div"); // inner div, all siblings of the <a> 
     dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow'); 
    }; 

    $(document).ready(function() { 
     $('div p a[href="#"]').click(function() { slideOut(this); }); 
    });

这滑出式（）函数稍微从什么简化它实际上是。它还交换+和 - 在实际代码扩展按钮，这使得它更复杂一点：

var slideOut = function(element){ 
     var parent = $(element).parent().parent(); // outer div 
     var dList = parent.children("div"); // inner div, all siblings of the <a> 
     dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow'); 

     // swap characters on the expander "button" 
     var o = dList.css("opacity"); 
     // dash is narrower than +, so we must compensate 
     if (o==1) { 
      $(element).html("+") 
       .css("padding-left", "1px") 
       .css("padding-right", "1px"); 
     } else { 
      $(element).html("-") 
       .css("padding-left", "3px") 
       .css("padding-right", "3px"); 
     } 
    };

您可以在上面提到的现场演示链接看到完整的HTML/JS代码。

我不知道的关键是可以通过调用带有“切换”的动画生成动画高度。

来源

2009-12-16 04:51:27 Cheeso

如果要创建垂直手风琴，则可以使用slideDown和slideUp;否则，需要组合更多CSS以允许在定位时使用动画的一些divs。

来源

2009-12-16 04:18:43 Aaron

仅供参考，jQueryUI和核心中的缩小滑动效果在第一个请求中仅为5.5KB。不需要整个jQueryUI库。您需要的文件 - ui.slider.min.js和ui.core.min.js

来源

2009-12-16 04:24:03

您可以对一个元素执行此操作。

var accordion = function(toggleEl, accEl) { 
    toggleEl.click(function() { 
     accEl.slideToggle(function() { }); 
     return false; 
    }); 
}

使用的slideToggle

http://docs.jquery.com/Effects/slideToggle

但是，如果你想要做的多层次，您将需要还添加了一个功能要经过的所有项目和滑动起来或者的slideToggle之前隐藏如果您只想要一次打开一个项目，则会触发。这是jquery手风琴可以提供帮助的地方。他们有许多这样的选择。

来源

2009-12-16 04:29:48

是基于jQuery的slideToggle？还是有一个单独的模块或插件？ – Cheeso 2009-12-16 05:03:05

slideToggle在基础jQuery中，这很好。但是，我在IE中收到了一些奇怪的动画文物。当div出现时，在幻灯片的末尾有一个跳跃步骤。我做''时看不到这个。animate（{height：'toggle'}）' – Cheeso 2009-12-16 05:10:21

如果工作正常，您也可以这样做。无论如何，我相信它就是这样。 – 2009-12-16 05:15:15

jQuery：如何在没有jQuery UI的情况下重现Accordion的滑出效果？

回答

相关问题