私が配置しているメニューシステムのモックアップがあります: http://djinnius.com/GFTest/gftest.html (ここにもビンがあります: http://jsbin.com/orejup/2/editしかし緑の div に表示されたテキストは正しく機能しません) 左上部の隅にある小さな矢印をクリックすると、メニューがスライドします。メニュー項目にマウスを重ねると、緑色の div にメニュー項目の完全なプレビューが表示されます。
メニューが次のようにエレガントにスライドイン/アウトすることを望みます: http://jsbin.com/itogor/5
上記の動作で特別なことは、jsbin で示されているようにポジショニングとオーバーフローのプロパティを使用しない場合、メニューが閉じられるときにメニュー テキストが押しつぶされることです。これは見苦しく、気が散ります。
上記の効果が適切に機能していると思っていましたが、そうでないことを示していると思われる問題に遭遇しました。スライドアウト メニューの選択に基づいて、緑の div の内容を変更したいと考えています。ただし、メニューの下の項目までスクロールして項目をクリックすると、緑色の div の内容が正しくありません。スライド メニューがテキストを押し下げており、クリック イベントの後に mouseenter および mouseleave イベントが発生しているようです。これにより、緑色の div の内容が正しくなくなります。
この動作を防ぐ方法について何か考えはありますか? ビン ( http://jsbin.com/orejup/2/edit )を書き込もうとしましたが、何らかの理由で緑色の div テキストが変化しません。コンソールを調べて、クリック イベントの後に発生する mouseenter/mouseleave イベントを確認することで、望ましくない効果を確認できます。