jQuery:在没有jQuery UI的情况下，如何重现手风琴的滑出效果？

Question

我只是在学习jQuery，弄清楚什么是可能的，找到我的路。

我希望有一个像手风琴一样的div“滑出”，但我不想支付jQuery UI下载的费用，而且我还想允许同时打开多个div。

它怎麽工作?在jquery.ui.accordion.js中，手风琴的滑出效果是如何实现的？是否可以调用.animate()将一个div从display:none移到display:block？(我了解到animate仅适用于数字属性。)

Answer 1

我正在学习各种各样的东西。我只使用了jQuery -没有UI，没有UI Accordion，没有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); });
  });

该slideOut()函数对其实际功能进行了略微简化。它还在实际代码中用+和-替换了扩展器按钮，这使得它变得更加复杂：

  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代码。

关键的事情，我不知道，是one可以通过调用“切换”的动画的高度。

Answer 2

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

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

使用slideToggle

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

但是如果你想做多个关卡，如果你一次只想打开一个项目，你还需要添加一个函数来遍历所有的项目，并在滑动开关触发之前将它们向上滑动或隐藏。这就是jquery accordion可以提供帮助的地方。他们有很多像这样的选择。

Answer 3

如果你正在创建一个垂直折叠，你可以使用slideDown和slideUp，否则，你将需要组合更多的CSS以允许在一些div的定位上使用animate。