Question

看看这个fiddle

任何人都可以解释原因：

一个。在动画完成之前，有序列表中的数字不会出现。当数字弹出时，它会导致混蛋。

湾在第一次关闭手风琴后，数字不会返回。

当切换标题时，.sublinks的css从Visible切换为Hidden，然后再切换回来。

Answer 1

不幸的是，我不知道如何解决抽搐问题 - 您必须根据其余代码解决这个问题。但是，我确实有一个非常简单的修复方法，让你的有序符号消失：

$(".dropdown").click(function() { 
     $(".sublinks").slideToggle(500, function() {
         ...perform your style changes that you were doing on callback here...
     }); 
});

我可以向你建议的另一件事是你尝试使用淡入淡出效果而不是幻灯片效果。你可以制作一个非常流畅的淡入淡出效果，可以“滑动”你的列表并逐个淡化每个元素，它看起来比幻灯片更干净。此外，你的元素不应该跳得那么多。几乎每个浏览器都有滑动效果。所有浏览器都支持淡入淡出效果（尽管IE不支持fadeTo）。如果您决定使用淡入淡出而需要帮助来编写插件让我知道，我将很乐意为您提供帮助。

祝你好运：）

Answer 2

*编辑*

我修好了！看看这个jsFiddle：http://jsfiddle.net/QtQjx/

* END EDIT *

您的CSS中的.sublinks类存在冲突的填充。

以下是相关的CSS：

.sublinks {
    display:none;
    list-style-type:none;
    padding:10px 0 20px 55px;
}

.sublinks {
    padding:0;
}

一方面，你告诉它提供.sublinks列表padding:10px 0 20px 55px等等另一方面，你告诉它根本不给它填充。摆脱第二个.sublinks和将第一个.sublinks的填充更改为10px 0px 20px 0px。

另外，当数字消失时检查下拉，我注意到它更新了顶级 OL代码如下：

<ol class="loweralpha sublinks" style="display: block; overflow: hidden; height: 335px; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 20px; ">

如果您能了解这种情况并消除overflow:hidden，我想您会解决你的问题。

干杯！

订单列表编号使用jQuery SlideDown消失

2 个答案: