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（我在每个documentatoin中添加了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}）}”

我正在为BlindUp工作“onmouseout”事件，但似乎无法让它工作。：（

Answer 4

使用： Effect.toggle（'id_of_element'，'blind'，{duration：2.0}）;

headfirstproductions.ca/prototype-and-scriptaculous-drop-down-menu

使用scriptaculous和prototype的BlindDown或SlideDown效果创建一个下拉列表

4 个答案: