0

私は個人的なプロジェクトに取り組んでいますが、それに問題があります。

シンプルなホバーメニューを作ろうとしています。

アイデアは、ユーザーがリスト要素にカーソルを合わせるとdivが表示され、divでマウスアウトするか、最初にdivにカーソルを合わせた要素が消えるというものです。

例えば。

これらのいずれかにカーソルを合わせると、div が表示されます。

<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>

<div id="link1div"><div id="link1innercontent"></div></div>
<div id="link2div"></div>

これで、li にカーソルを合わせると div が表示され、div をマウスアウトすると div が消えます。

私がやろうとしているのは、li または div のいずれかでマウスアウトすると、div が消えることです。やろうとすると両方のdivが消えるので困っています。

以下の私のコード：

<div id="menu">
<ul>
                        <li id="link_1">Link 1</li>
                        <li id="link_2">Link 2</li>
                    </ul>
</div>

 <div id="link_1"><div id="link1innercontent"></div></div>
    <div id="link_2"></div>

$("#menu li").hover(function(){
var name1 = $(this).attr('id'); //ignore these, they are for selecting appropriate ids
var name = name1.split('_'); //ignore these, they are for selecting appropriate ids
openMenu(name[1]);
$("#m_"+name[1]).mouseleave(function(){ // I have tried $("#m_"+name[1]+",#"+name1) but it 
closeMenu(name[1]);                     // hides the div before you can access it.
});
});


function openMenu(name){
$("#m_"+name).slideDown();  
}

function closeMenu(name){
$("#m_"+name).slideUp();    
}

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

4

2 に答える 2

0

2 つの要素に対して 1 つの ID を使用することはできません。代わりにクラスを使用する必要があります。

<div id="menu">
<ul>
<li class="link_1">Link 1</li>
<li class="link_2">Link 2</li>
</ul>
</div>

<div class="link_1"><div id="link1innercontent"></div></div>
<div class="link_2"></div>

$("#menu li").hover(function(){
  var name1 = $(this).attr('class'); 
  var name = name1.split('_'); //ignore these, they are for selecting appropriate ids
  $('div.' + name[1]).slideDown() 
  }, function() {
    $('div.' + name[1]).slideup()
 });
于 2012-06-08T16:21:17.960 に答える
0

ここに奇妙な JavaScript があります。:) これが私が思うことです：divマウスがdivORを離れたときに消えたいliですか？したがって、両方を同時に通過することはできないため (マウスを一方から他方に渡すとmouseleaveイベントがトリガーされます)、次のことを行う必要があります。

var t = setTimeout(...)マウスがdivORを離れたときのタイムアウト変数を設定しますli(たとえば、500 ミリ秒)。この後、div を非表示にします (setTimeoutハンドラーでこれを行います)。

ここで、マウスを上に移動するか、このdivタイムアウトをliクリアすると: clearTimeout(t);. 私はそれがほとんどの人がこれを行う方法だと思います（他にはありますか？）。

于 2012-06-08T16:23:35.770 に答える