2

scriptaculous とプロトタイプを使用して 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です（ターゲットを最初に非表示にしたい場合は、スタイルシートの代わりにそこに置くように言われています）。

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

4 に答える 4

2

この効果は「onclick」イベントでうまく機能するようです

しかし、onmouseover では、エフェクトキューを使用する必要があることを読みました。これにより、このスクリプトのように、ブラインド アップとブラインド ダウンが互いに踏み込まないようにすることができます。

キューはイベントのリストです (現在のコンテキストでは効果)。これらのイベントは、現在のアクションの妨害を防ぐ目的で、次々に (または並行して) 発生します。

于 2008-11-16T11:35:40.697 に答える
0

キューは役に立たないようです。1 時間以上さまざまなことを試した後、私はあきらめて、単純なホバー メニューに固執するつもりです。これは、これらのライブラリが簡単にするはずの基本的な UI 拡張効果のようなものだと思っていたので、面白いです。

于 2008-11-16T18:39:55.350 に答える
0

使用: Effect.toggle('id_of_element', 'blind', { duration: 2.0 });

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

于 2009-05-20T01:53:09.283 に答える
0

BlindDown は次のように行うことができます:

onmouseover="if($('dropdownone').style.display=='none') { Effect.BlindDown('dropdownone', {期間: 0.8 }) }"

「onmouseout」イベントの BlindUp に取り組んでいますが、機能していないようです。:(

于 2009-02-20T23:39:14.543 に答える