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

Question

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

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

它是如何运作的？ jquery.ui.accordion.js 内部手风琴的滑出效果是如何完成的？我可以调用 .animate() 将 div 从 display:none 移动到 display:block 吗？ （我读到 animate 仅适用于数字属性。）

Answer 1

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

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

使用slideToggle

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

但是如果你想做多个级别，您还需要添加一个功能来浏览所有项目，如果您只想一次打开一个项目，则在滑动切换触发之前将它们向上滑动或隐藏它们。这就是 jquery 手风琴可以提供帮助的地方。他们已经加入了许多这样的选项。

Answer 2

如果您要创建垂直手风琴，则可以使用 SlideDown 和 SlideUp，否则，您将需要结合更多 CSS 以允许在某些 div 的定位上使用 animate。

Answer 3

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

Answer 4

我正在学习各种各样的东西。我只使用了 jQuery - 没有 UI，没有 UI Accordion，没有 UI Effects - 并得到了我想要的下滑效果。不确定这种视觉效果的术语。 （我认为这是 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 代码。

我不知道的关键是，可以通过使用“toggle”调用 animate 来对高度进行动画处理。