1

アニメーション化された (かろうじて) ドロップダウン メニューを作成しようとしています。マイページのソースを見れば、JSファイルがあります。私は基本的にそれを機能させています。

私の質問は次のとおりです。メインメニューから何かにカーソルを合わせてから、ポップアップ（ダウン）するサブメニューに直接移動すると、そのメニューの何かにカーソルを合わせてそのままにしておくとそのままになります。

http://lmiah.site11.com/slide%20down%20box%20menu%20new/mainTest.html

混乱を避けるために、直接的な例を挙げます。

「採用情報」にカーソルを合わせてからまっすぐ下に移動し、「従業員の声」にカーソルを合わせてからマウスを完全にメニューの外に移動すると、「採用情報」に再びカーソルを合わせるまでメニューは残ります。

どんな助けでも大歓迎です！

編集：a href="# class="subMenuFloat"これらのリンク（非表示のドロップダウンにあるリンク）にカーソルを合わせると、ドロップダウンdivが残ることに関係があることがわかりました。なぜこれが起こるのかわかりませんが、単にliの上にカーソルを置いてリンクを見逃すと、正しく終了します.

4

2 に答える 2

0

デモ: http://jsbin.com/welcome/13456

メニュープラグインを使用しない例。これは単なる概念実証です。

$(function() {
    var flag = false;
    $('#mainMenu li.mainMenuItems').hover(function() {
        if (!flag)
            $(this).find('.submenu').slideDown(500);

    }, function() {
        if (!flag)
            $(this).find('.submenu').slideUp(500);
    });

    $('#mainMenu li.mainMenuItems .submenu').hover(function() {
        flag = true;
    }, function() {
        $(this).slideUp(500);
        flag = false;
    });
});
于 2012-08-17T18:51:30.397 に答える
0

これは、使用されているセレクターが実際にある要素から別の要素に移動しているため、jquery で hover 関数を使用する場合によくある問題です。これが私がこれを行った方法です。基本的に、メニューのli内にdivまたはliを設定します。例：

<ul class="menu-hover">
  <li class="menu one">Menu Option One
    <div> Here is the drop down menu</div>
  </li>
  <li class="menu two">Menu Option One
    <div> Here is the drop down menu</div>
  </li>
</ul>

jqueryは

基本的にこれは、メニューのliにカーソルを合わせると、そのメニューの下のすべてのdivを非表示にし、ドロップダウンのすべてのメニューになり、ホバーしたliの下にあるdivを表示することを意味します。li の位置を相対位置にし、div を絶対位置にする必要があります。したがって、理論的には、div は li の下に含まれているため、ホバーしても開いたままになります。

$(".menu-hover li").hover(function(){ 

 //Hide each div on hover
  $(".menu div").each(function(){
    $(this).hide();
  });

  $("div", this).show();
});
于 2012-08-17T18:29:19.287 に答える