javascript - slideDown 在最后突然跳跃

Question

我在垂直列中构建了一个相当正常的菜单子菜单排列——嵌套的 UL，slideToggle用于展开和折叠子菜单。

我要解决的问题是子菜单“跳转”在最后打开的方式。（我在 Chrome 的最新版本中进行测试。）它可能在第二个子菜单“Benefits”中最为明显。它不会在菜单折叠时跳跃，只有在它们展开时才会跳跃。

我认为问题可能与:after仅在菜单完全展开时添加的样式有关。current具体来说，一旦菜单完全展开，该类就会添加到 LI 标记中。但是注释掉切换该类的代码似乎没有效果。

$(document).ready(function() {
  $('#group-subnav > ul > li > a').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).closest('li');
    $li.find('ul').slideToggle('', function() {
      $li.toggleClass('current')
    }).end().siblings().find('ul').slideUp('', function() {
      $li.siblings().removeClass('current')
    }).end();
  });
});

/* Normalize */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
ol,ul {
  list-style:none;
}


#group-subnav {
  display: table-cell;
  vertical-align: top;
  background: #f6ca00;
  width: 159px;
  height: 100%;
}

#group-subnav a {
  display: block;
  color: inherit;
  text-decoration: none;
}

#group-subnav a:hover {
  /*    text-decoration: underline;*/
}

#group-subnav>ul {}

#group-subnav>ul>li {
  border-top: 2px solid #fff;
  font-size: 80%;
  text-shadow: 1px 1px 2px #eee;
  color: #333;
  letter-spacing: 1px;
  line-height: 1.2em;
  background: #bebebe;
  /* Old browsers */
}

#group-subnav>ul>li>a {
  padding: 6px 8px 12px;
  background: #bebebe;
  /* Old browsers */
  background: -moz-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bebebe), color-stop(50%, #b3b3b3), color-stop(100%, #808080));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* IE10+ */
  background: linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#808080', GradientType=0);
  /* IE6-9 */
}

#group-subnav>ul>li>a:after {
  content: ' +';
  float: right;
}

#group-subnav>ul>li.current>a:after,
#group-subnav>ul>li:hover>a:after {
  font-size: 75%;
  content: ' \25bc';
}

#group-subnav>ul>li>ul {
  display: none;
  background: #f4e693;
  padding: 2em 0;
}

#group-subnav>ul>li.current>ul
/*,
            #group-subnav > ul > li:hover > ul*/

{
  display: block;
}

#group-subnav>ul>li>ul>li {
  text-shadow: none;
  padding: 5px 8px;
  border-bottom: 1px solid #e5b502;
  color: #666;
  font-size: 90%;
  letter-spacing: 0;
}

#group-subnav>ul>li>ul>li:first-child {
  border-top: 1px solid #e5b502;
}

#group-subnav>ul>li>ul>li>a {
  color: inherit;
  text-decoration: none;
}

#group-subnav>ul>li>ul>li>a:after {
  content: "\00a0>";
}

#group-subnav>ul>li>ul>li>a:hover {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav id="group-subnav">
  <!-- one column wide -->
  <ul>
    <li class="current"><a href="#">Services</a>
      <ul>
        <li><a href="#">Workflow Analysis</a></li>
        <li><a href="#">Technology Assessment</a></li>
        <li><a href="#">Precision Conversion</a></li>
        <li><a href="#">Intelligent Indexing</a></li>
        <li><a href="#">Simple Search and Retrieval</a></li>
        <li><a href="#">Better Forms Management</a></li>
        <li><a href="#">Effortless Distribution</a></li>
        <li><a href="#">Total Security</a></li>
        <li><a href="#">Easier Regulatory Compliance</a></li>
        <li><a href="#">Scanning</a></li>
      </ul>
    </li>
    <li><a href="#">Benefits</a>
      <ul>
        <li>Faster Storage and Retrieval</li>
        <li>Meticulous Records Management</li>
        <li>Disaster Prevention and Recovery</li>
        <li>Heightened Security</li>
        <li>Freed-up Physical Space</li>
        <li>Responsive Customer Service</li>
      </ul>
    </li>
    <li><a href="#">Get Started</a>
      <ul>
        <li>Call our Strategic Services Manager to get started.<br>
          <li><a href="mailto:">Email</a></li>
      </ul>

      </li>
  </ul>
</nav>

在 jsFiddle 上查看

score 16 · Accepted Answer

给你正在滑动切换的元素设置一个宽度。

http://jsfiddle.net/5gGum/6/

    #group-subnav > ul > li > ul {
        display: none;
        background: #f4e693;
        padding: 2em 0;
        width: 159px;
    }

这允许 jQuery 准确地计算结束高度。

作为参考，我从这里了解了这个小技巧：http ://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm

score 10 · Accepted Answer

我遇到了同样的问题，但没有任何效果。事实证明，将“过渡”属性设置为某些东西会导致我的问题：PI 只是在滑动对象上将其设置为 none，而 slideDown 现在可以作为一种魅力:-)

score 5 · Accepted Answer

对我来说，问题是我有 CSS 填充。删除了填充并将其转移到另一个 html 标签，封装了我的原始标签，一切正常。

score 5 · Accepted Answer

我知道这是一个老问题，但也许我的解决方案可以帮助其他一些谷歌员工。

对我来说，问题是由填充和 box-sizing 引起的：border-box。
我不需要特定的高度或宽度（两者都试过，最后将它们删除），盒子大小就可以了。

box-sizing:content-box;
padding: 20px;

这个剪断对我的滚动框有用。请注意，没有填充的 box-sizing:border-box 不会导致任何问题。

jQuery 版本是 1.7.1

score 1 · Accepted Answer

2020答案

在元素正下方添加这个虚拟 div 标签slideDown()

<div style="overflow: hidden;"></div>

我只是偶然发现了这个技巧，它对我来说非常有效。

score 0 · Accepted Answer

我有这个问题。我的问题是因为我将 CSS 中的显示属性更改为“网格”。滑动功能将显示设置为阻塞，因此发生冲突，导致解决方案跳跃。

我通过用另一个 div 包装子节点以显示为网格来解决这个问题。

score 0 · Accepted Answer

正如@Rick在他们的回答中所说，csstransition属性会干扰 jQueryslideDown()和slideUp()方法。

当然，您可以只transition从元素的 css 中删除该属性，但是您可能仍需要其他自定义动画的过渡。

这是一个简单的解决方法：

$('selector').css('transition', 'unset'); 
if ($('selector').is(':visible')) {
    $('selector').slideUp();
} else {
    $('selector').slideDown();
}
setTimeout(function() {
    $('selector').css('transition', 'all 0.4s ease 0s');
}, 400);

score 0 · Accepted Answer

确保您尝试使用的元素slideToggle没有任何样式，因为 jQuery 将在动画期间添加它。我的问题是我设置了一个填充并删除它解决了这个问题。

score 0 · Accepted Answer

在我的情况下，它使用“！important”属性填充顶部和底部，删除“！important”使动画再次平滑。

javascript - slideDown 在最后突然跳跃

9 回答 9

2020答案

Related

Reference