0

数時間ネットを検索した後、誰もが使用する標準の「リスト」アイテムの代わりに、ドロップダウンで html コンテンツを許可する水平ドロップダウン メニューの独自のコードを作成することにしました。私が見つけたほとんどのドロップダウンと比較して、コードはほとんどありません。私を夢中にさせている問題が 2 つあります。

問題 #1: カテゴリの上にマウスを置くと、「ドロップダウン」div が表示されますが、「ドロップダウン」div にマウスオーバーすると消えます。ただし、別のカテゴリにマウスオーバーすると、「ドロップダウン」div が消え、新しいカテゴリが表示されます。私は何が欠けていますか？

問題 #2: カテゴリの下線リンクが表示される場所のすぐ上でカーソルを停止してそのままにすると、「ドロップダウン」div が 2 回ポップアップして点滅するように見えます。それも解らない？

ここにコードを投稿しました：http://jsfiddle.net/UXxL8/

どうもありがとう、私はそれがおそらく私が見落としている単純なものであることを知っています. しかし、同じコードを長時間見つめすぎると、それがどのようになるかがわかります...

4

2 に答える 2

2

現在、ビヘイビアーをアンカーに直接アタッチしています。新しく公開されたコンテンツにマウスを合わせると、アンカー領域を超えてマウスアウトがトリガーされます。アンカーとドロップダウンの両方を同じコンテナー内に配置し、イベントをそのコンテナーにアタッチすると、期待どおりの動作が得られます。

また、メニューには子要素があるため、mouseover と mouseout ではなく、mouseenter と mouseleave を使用することをお勧めします。この質問は、それが推奨される理由をよく説明しています。

ここで更新されたフィドルをセットアップしました。カテゴリ 3 メニュー項目が更新されました。

于 2012-09-21T02:40:24.880 に答える
1

また、ドロップダウンにバインドする必要がありますmouseover/mouseout。ドロップダウンが点滅している理由は、アニメーション関数がキューに入れられているためです。終了fadeIn後に開始されるため、別のアニメーションを追加する前に現在のアニメーションfadeOutが必要です。stop

これが改善されたコードです。

于 2012-09-21T02:49:23.743 に答える