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的定位上使用动画。

Answer 3

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

Answer 4

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

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

我不知道的关键是，可以通过使用“切换”调用动画来设置高度的动画。

jQuery：如果没有jQuery UI，我怎样才能重现手风琴的滑出效果？

4 个答案: