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

我有这个菜单：

<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？

区别在于您不将

display

设置为

display:block，这是标准，因此它被外部显式定义覆盖，该定义应隐藏。如果在Javascript中添加另一行以添加
thisDiv.style.display=block，并在隐藏结束时将其删除，它应该可以正常工作

更新：
因此，当您有
display时，它不显示的原因是：无是因为当Javascript动画开始时，没有设置
display:block使其可见，它只是完全删除元素上的
display
属性，因此它仍然受外部CSS的影响

我的建议：如果您不想让Javascript变得更加困难，只需将样式保留为内联样式，这样以后Javascript就可以自动删除它。如果您想使用外部CSS样式，只需在Javascript中添加一个简短的助手函数，即可将CSS
display
属性更改为block，无论何时启动，动画完成后，将其设置为
display:none
。
区别在于您不会将
display
设置为
display:block，这是标准，因此它被外部显式定义覆盖，该定义应隐藏。如果在Javascript中添加另一行以添加
thisDiv.style.display=block，并在隐藏结束时将其删除，它应该可以正常工作

更新：
因此，当您有
display时，它不显示的原因是：无是因为当Javascript动画开始时，没有设置
display:block使其可见，它只是完全删除元素上的
display
属性，因此它仍然受外部CSS的影响

我的建议：如果您不想让Javascript变得更加困难，只需将样式保留为内联样式，这样以后Javascript就可以自动删除它。如果您想使用外部CSS样式，只需在Javascript中添加一个简短的助手函数，即可将CSS
display
属性更改为block，无论何时启动，动画完成后，将其设置为
display:none
。
我的代码无法工作的原因是Javascript无法访问外部CSS样式声明。只有内联样式可以通过
元素.style
访问

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

解决方案是使用类名。我的最终解决方案检查元素是否具有特定的类名。当类名出现时，元素还没有被单击，因此元素会向下滑动，类名也会被删除。在接下来的所有单击中，将切换元素

我在这里构建并上传了一个小演示：
我的代码无法工作的原因是Javascript无法访问外部CSS样式声明。只有内联样式可以通过
元素.style
访问

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

解决方案是使用类名。我的最终解决方案检查元素是否具有特定的类名。当类名出现时，元素还没有被单击，因此元素会向下滑动，类名也会被删除。在接下来的所有单击中，将切换元素

我在这里构建并上传了一个小演示：
Nightfirecat tnx，感谢您的努力。我不明白你的答案，你能重新表述或扩展它吗？这能更好地回答你的问题吗？感谢你的努力。我不明白你的答案，你能重新表述或扩展它吗？这能更好地回答你的问题吗？
<div class="submenu" style="display:none;">

#nav div.submenu{
display: none;
}