0

メニュー項目にカーソルを合わせると、背景の色が変わり、サブメニューも表示されます。マウスをメニュー項目からサブメニューに移動したときに、サブメニューを表示し続け、背景の変更を維持するにはどうすればよいですか?

私のhtml

<div class="shoplink"><a>Online Shop</a></div>
<div id="shop-menu">
            <ul>
                <li>Food</li>
                <li>Home & Living</li>
                <li>Personal Assistance</li>
                <li>Kids</li>
                <li>Musical Instruments</li>
                <li>Beauty & Wellbeing</li>
                <li>Outdoor</li>
                <li>Office & Stationery</li>
                <li>Cards & Gift Paper</li>
                <li><b>Browse All</b></li>
            </ul>
        </div> <!-- #shop-menu -->

これまでの私のJS....

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).toggleClass('activeitem');
    $('#shop-menu').toggle();
});

そのため、.sublink にカーソルを合わせると、ショップ メニューを表示できます。マウスを .shoplink から #shop-menu に移動してアイテムを選択するときは、そこに置いておきます。

本当にありがとう

4

3 に答える 3

0

メニュー項目内にドロップダウンを配置してみてください

<div class="shoplink">
     <a>Online Shop</a>
     <div id="shop-menu">
            <ul>
                <li>Food</li>
                <li>Home & Living</li>
                <li>Personal Assistance</li>
                <li>Kids</li>
                <li>Musical Instruments</li>
                <li>Beauty & Wellbeing</li>
                <li>Outdoor</li>
                <li>Office & Stationery</li>
                <li>Cards & Gift Paper</li>
                <li><b>Browse All</b></li>
            </ul>
     </div> <!-- #shop-menu -->
</div>

デモ: http://jsfiddle.net/cU629/

于 2013-02-28T02:29:59.200 に答える
0

あなたのトゥーグルはメニューを表示したり隠したりしていると思います...試してください：

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).addClass('activeitem');
    $('#shop-menu').show();
});

元に戻すには、@Madhu Rox の回答を確認して、次のようにします。

$('#shop-menu').live('mouseleave', function(e) {
    $('.shoplink').removeClass('activeitem');
    $('#shop-menu').hide();
});

unbindのようなホバー イベントを使用することもできます$(this).unbind('hover');が、ページ内の別のアクションによってページが閉じられ、再度開きたい場合は、ホバー イベントを再バインドする必要があります。

于 2013-02-28T02:30:02.920 に答える
0

HTML を変更して、サブメニュー全体とメニュー項目を<div class="shoplink">

あなたのコードは次のようになります

<div class="shoplink">
  menu item
    sub menu
</div>

または前の回答として、Javaスクリプトを次のように更新してください

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).addClass('activeitem');
    $('#shop-menu').show();
});

その後に次のコードも追加します

$('#shop-menu').live('mouseleave', function(e) {
    $('.shoplink').removeClass('activeitem');
    $('#shop-menu').hide();
});
于 2013-02-28T03:28:25.487 に答える