1

看看这个小提琴

谁能解释为什么：

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

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

切换标题时，.sublinks 的 css 从可见切换到隐藏一次，然后永远不会变回。

4

2 回答 2

1

* 编辑 *

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

*结束编辑*

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

这是相关的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，我认为你会解决你的问题。

干杯!

于 2012-08-14T19:15:52.267 回答
1

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

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

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

祝你好运 ：）

于 2012-08-14T18:59:09.723 回答