javascript - 使用 scriptaculous 和原型(prototype)的 BlindDown 或 SlideDown 效果制作下拉列表

Question

我正在尝试使用 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>

这是 html(我在文档中添加了 style="display: none"，如果您希望目标最初被隐藏，它说将它放在那里而不是放在样式表中)。

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

Answer 1

这个效果似乎很好用with 'onclick' events

但是有了 onmouseover，I read你需要使用效果 queue所以你的盲目向上和盲目向下不会互相踩踏，就像in this script .

A queue is a list of events (in the current context Effects). These events take occur one after the other (or parallel) for the purpose of preventing disturbence of current actions.