使用脚本和原型的BlindDown或SlideDown效果制作下拉列表

Question

我正在尝试使用scriptaculous和prototype来创建一个javascript下拉列表。我知道这可以使用CSS :hover伪选择器来完成，但是我想给它添加一些额外的技巧。问题是，虽然我可以让dropdown/up效果工作，但它似乎非常不稳定。有没有简单的方法可以做到这一点，或者我应该坚持悬停？这是我正在使用的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那样互相践踏。

队列是事件(在当前上下文效果中)的列表。为了防止当前动作的干扰，这些事件一个接一个地(或并行地)发生。

Answer 2

排队看起来没什么帮助。在尝试了一个多小时不同的东西后，我打算放弃，继续使用简单的悬停菜单。这很有趣，因为我认为这是一种基本的UI增强效果，这些库应该很容易做到这一点。

Answer 3

BlindDown可以像这样创建：

onmouseover="if($('dropdownone').style.display=='none') { Effect.BlindDown('dropdownone'，{ duration: 0.8 }) }“

我正在为"onmouseout“事件编写BlindUp，但似乎不能让它工作。:(