Javascript 使用scriptaculous和prototype制作下拉列表'；s向下或向下滑动效果

我正在尝试使用scriptaculous和prototype创建一个javascript下拉列表。我知道这可以通过CSS:hover伪选择器来实现，但我想给它添加一些额外的天赋。问题是，虽然我可以让下拉/上升效果发挥作用，但它似乎非常脆弱。有没有一个简单的方法来做到这一点，或者我应该坚持悬停？这是我正在使用的CSS

<style type="text/css">
ul {list-style-type: none}

#navbar>li {
 position: relative;
 float: left;
 padding-right: 20px;
 height: 2em;
 background-color: #002;
}

ul.dropdown {
 display: block;
 position: absolute;
 top: 2em;
 left: 0px;
 background-color: #00c;
}
</style>

ul{列表样式类型：无}
#导航栏>李{
位置：相对位置；
浮动：左；
右边填充：20px；
高度：2米；
背景色：#002；
}
下拉列表{
显示：块；
位置：绝对位置；
顶部：2米；
左：0px；
背景色：#00c；
}

这是html（我在documentoin中添加了style=“display:none”，意思是如果您希望目标最初被隐藏，就将其放在那里而不是样式表中）

下拉链接1
下拉链接2
下拉链接3




下拉链接1
下拉链接2
下拉链接3
下拉链接4
下拉链接5




下拉链接1
下拉链接2

这个效果似乎很好

但是在onmouseover中，你需要使用这个效果，这样你的上盲和下盲不会像这样互相踩在一起

队列是事件列表（在当前上下文中）。这些事件一个接一个（或并行）发生，以防止当前动作的干扰

---

排队似乎没有什么帮助。在尝试了一个多小时不同的东西之后，我打算放弃，只使用普通的悬停菜单。这很有趣，因为我认为这是这些库应该简化的基本UI增强效果。

可以这样做：

onmouseover=“if（$（'dropdownone'）.style.display=='none'）{Effect.BlindDown（'dropdownone'，{duration:0.8}）”

我正在为“onmouseout”活动制作盲屏，但似乎无法正常工作（

使用：Effect.toggle（'id\u of_元素，'blind'，{duration:2.0}）；

---

headfirstproductions.ca/prototype和scriptaculous下拉菜单

很抱歉听到这个消息。您是否使用onclick事件验证了相同类型的菜单？它会工作吗？（即使它不是您想要的）

<ul id="navbar">
  <li
    onmouseover="Effect.BlindDown('dropdownone', { duration: 0.8 })"
    onmouseover="Effect.BlindUp('dropdownone', { duration: 0.8 })"><a href="">Menu Link 1</a>
    <ul id="dropdownone" class="dropdown" style="display: none">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
    </ul>
  </li>
  <li><a href="">Menu Link 2</a>
    <ul id="dropdowntwo" class="dropdown">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
      <li>Drop Down Link 4</li>
      <li>Drop Down Link 5</li>
    </ul>
  </li>
  <li><a href="">Menu Link 3</a>
    <ul id="dropdownthree" class="dropdown">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
    </ul>
  </li>
</ul>