Question

我有一个奇怪的问题，无论我尝试什么，我都无法找到解决方案。我有一个简单的菜单切换几个div（向上/向下滑动），如下所示：

    <div class="navigation">
        <ul class="left">
            <li><a href="#lorem1" class="menu">lorem1</a></li>
            <li><a href="#lorem2" class="menu">lorem2</a></li>
            <li><a href="#lorem3" class="menu">lorem3</a></li>
        </ul>       
    </div>

和一些正在切换的div。很简单，但是有很多代码，所以我不会在这里粘贴它。

使其有效的脚本是：

$('.navigation a').click(function() {
  var $requested = $(this.getAttribute('href'));
  $('.top-drawer').not($requested).slideUp('slow');
  $requested.slideToggle('slow')
});

一旦用户点击链接，div就会向下滑动，闪烁然后变为真正的高度（高度应该是）。

这是Fiddle。请务必获得＆＃34;结果＆＃34;窗口至少1000+ px宽，否则它不会工作（错误不会显示）。

Answer 1

尝试了解您正在使用的代码。
这就是我认为jQuery的slideUp()和slideDown()的工作方式;主要是算法更改元素的height，display后的height等于元素的height或者＃34; 0＆＃34;。

因此，当您将元素的position设置为relative时，您会看到您正在呼叫的内容＆＃34;闪烁＆＃34;，特别是当您有多个元素时元素位于同一位置。你也会看到这些＆＃34;闪烁＆＃34;当您使用fadeIn()，fadeOut()等时，因为元素的display不会立即设置为＆＃34;无＆＃34;或在这些情况下可见的任何内容，但在动画完成后。

解决方案：

将元素的位置设置为绝对值。这应该可以解决你的问题; example

Answer 2

请参阅我对此JSFIDDLE

的建议

这里有一个变化的解释：

问题

每个.top-drawer jQuery中的所有浮动元素都有很多问题需要计算div的高度，因为元素会在向上和向下滑动时移动。

建议

切换为inline-block。但是为了使用您的CSS，特别是每个.top-drawer上的填充，您需要对使用box-sizing: border-box;，padding和{{1}的任何内容使用inline-block使用％。如果好奇，你可以阅读这个HERE。

新问题

如果你走width的路线（现在最佳做法）。您将需要使用jQuery 1.8.xx或更高版本。我注意到你在你的小提琴中使用的是1.7.2，其中有一个inline-block的错误，在之后的版本中修复了。

jQuery切换中奇怪的闪烁

2 个答案:

问题

建议

新问题