0

リストにメニューがあります。これはhtmlです：

 <div class="main_menu">
   <ul>
      <li>
        <a href="#" target="_self"><span>Content</span></a>
        <div id="submenu_01" class="sub_menu_main"></div>
      </li>
      <li>
        <a href="#" target="_self"><span>Content</span></a>
        <div id="submenu_02" class="sub_menu_main"></div>
      </li>
   </ul>
 </div>

今-リスト要素にsub_menu_mainカーソルを合わせると、各liに依存し、異なるコンテンツを持つdivを表示する必要があります。さらに、リストの div 要素をしばらく変更しても屋外のままになり、別の要素がまだ表示されないように、mouseleve アクションにタイムアウトを設定したいと考えています。

これは私の機能です：

$('.main_menu ul li').mouseenter(function(){
    $('.sub_menu_main').css('display','block');
});
$('.main_menu ul').find('li').each().mouseleave(function(){
    setTimeout(function(){
        $('.sub_menu_main').css('display','none');
    },2000);
});

助けてthx。

4

3 に答える 3

0

このようにそれぞれに自動的にバインドされる.each()ため、必要はありません.mouseleave()li

$('.main_menu ul').find('li').mouseleave(function(){
   setTimeout(function(){
       $('.sub_menu_main').hide();
   },2000);
});
于 2012-12-04T10:33:26.640 に答える
0

問題が何であるかを正確に述べていませんが、最初は空のeach()呼び出しは必要ありません。

$('.main_menu ul').find('li').mouseleave(function() {
    setTimeout(function(){
        $('.sub_menu_main').css('display','none');
    }, 2000);
});

それ以外は、正しく動作するはずです。

于 2012-12-04T10:33:58.593 に答える
0

あなたはこれを試すことができます、それはきれいではありませんが、誰かがそれをきれいにするのを手伝ってくれるかもしれません:

function getSubMenu(e) {
    var $target = $(e.target);
    var submenu = $target;
    if ($target.is('a') || $target.is('span') || $target.is('li')) {
        var $li = $target.parents('li');
        $submenu = $li.find('.sub_menu_main');
    }
    return $submenu;
}
$('.sub_menu_main').hide();
$('.main_menu ul li').hover(function(e) {
    var $submenu = getSubMenu(e);
    $($submenu).show();
}, function(e) {
    var $submenu = getSubMenu(e);
    setTimeout(function() {
        $($submenu).hide();
    }, 2000);
});​

デモ

于 2012-12-04T11:18:13.367 に答える