Question

我有这个菜单：

<ul id="nav">
<li class="level0">Item 1</li>
<li class="level0 parent">
    <a><span>Click Me!</span></a>
    <div class="submenu">
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </div>
</li>
</ul>

我希望在加载页面时隐藏子菜单。当用户单击父项时，应显示子菜单。

当我像这样使用内联CSS时，一切正常。

<div class="submenu" style="display:none;">

请参阅此演示：http://jsfiddle.net/zJk6P/（点击右下方的“点击我”即可运行演示。）

当我像这样使用外部CSS时，子菜单不再出现了。

#nav div.submenu{
display: none;
}

请参阅此演示：http://jsfiddle.net/5tNqc/4/

为什么会有任何差异，如何让滑动效果与外部CSS一起使用？

Answer 1

我的代码不起作用的原因是Javascript无法访问外部CSS样式声明。只有element.style可以访问内嵌样式。

Effect.toggle(element, 'slide');尝试在未显示元素时向下滑动元素，在显示元素时向上滑动元素。因此，当元素被外部样式表隐藏时，Effect.toggle将尝试向上滑动元素，因为它根本不“知道”元素已被隐藏。

解决方案是使用类名。我的最终解决方案检查元素是否具有某个类名。如果存在类名，则不会单击该元素，因此将向下滑动元素并删除类名。所有下一次点击，元素都会切换。

我在这里制作并上传了一个小型演示：http://i.amniels.com/ext/stackexchange/2011-09/index.html

Answer 2

不同之处在于，您不要将display更改为display: block;，这是标准，因此它会被外部显式定义覆盖，它应该被隐藏。如果你在Javascript中添加另一行来添加thisDiv.style.display = block;，并在隐藏它时删除它，它应该可以正常工作。

更新

所以，当你的CSS文件中有display: none;时它没有出现的原因是因为当Javascript动画开始时，而不是在你的div上设置display: block;，这将使它是可见的，它只是完全删除元素上的display属性，因此它仍受外部CSS的影响。

我的建议：如果您不希望Javascript变得更加困难，只需将样式保留为内联，以便以后可以通过Javascript自动删除它。如果你想为它使用外部CSS样式，你可以在你的Javascript中添加一个简短的辅助函数，以便在它启动时将CSS display属性更改为阻塞，并在之后将其设置为display: none。动画结束了。

如何使用Scriptaculous滑动外部CSS隐藏的元素？

2 个答案:

更新