首页 文章

手风琴动画在设置高度时自动破坏！重要

提问于
浏览 次
0

What's going on? ：我的jQuery手风琴的动画被打破了 . 在关闭上一个选项卡之前，它会在短时间内单击下一个选项卡后显示先前打开的选项卡 . 动画也不会滑动 .

CSS ：发现自this answer

/* The following was added into accordion.css */
.ui-accordion .ui-accordion-content { height: auto!important; }

jQuery

$(document).ready(function() {

    $("#accordion").accordion({ 
        active: false,
        fillSpace: false
    });

    $("#accordion").accordion("option", "active", false);
    $("#accordion").accordion("option", "fillspace", false);
});

What I have tried ：我已经摆弄了 fillSpace 和 height 的值 . 在accordion.css中，我尝试了 overflow: visible!important; 但格式化确实搞砸了 .

What I would like to happen ：使用每个部分的高度清理动画，具体取决于每个部分的内容量 <div> （AKA我上面的CSS所用的内容） .

jquery css animation height accordion

2 回答

  • 1

    如果我没弄错你正在使用插件？至少对我来说这是一个问题（因为出乎意料的行为而讨厌他们） . 不久前我创造了自己的手风琴 . 你可以查看工作示例HERE.希望它对你有所帮助！
    这是我的代码：

    $(document).ready(function() {

   $('.wrapper ul li ul:first').addClass('active');
   $('.wrapper ul li ul').hide();
   $('a.home,a.about,a.service,a.contact').click(function()     {
   if($('a.home,a.about,a.service,a.contact').next('ul').hasClass('active')) {
   $('.active').stop(true, true).slideUp('slow');
   $('.active').removeClass('active');
   $(this).next('ul').addClass('active');
   $('.active:not(:animated)').stop().slideDown('slow');
   }
   });
   });
    回复于
  • 0

    我觉得现在有点傻了，但是简单地将 autoHeight 设置为false会消除内容较少的部分下面的不必要空间 . 动画也很流畅 .

    $(document).ready(function() {

    $("#accordion").accordion({ 
        active: false,
        autoHeight: false, // ADDED
        collapsible: true
    });

    $("#accordion").accordion("option", "active", false);
    $("#accordion").accordion("option", "autoHeight", false); // ADDED
    $("#accordion").accordion("option", "collapsible", false);
});
    回复于

相关问题