1

サブメニューを使って最小のメニューを作成しようとしています。これまでのところ、これが私のコードです：

<div id="ctl100_cphHeader_NavigationBar">
    <li></li> <!-- makes first left-border in css -->
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li>
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li>
    <li>
        <a class="navlink" href="/ComingSoon.aspx">N/A</a>
        <div class="submenu">
            <a class="navlink" href="/">Home</a>
            <a class="navlink" href="/">Home</a>
        </div>
    </li>
    <li>
        <a class="navlink" href="/ComingSoon.aspx">N/A</a>
        <div class="submenu">
            <a class="navlink" href="/ComingSoon.aspx">Coming Soon</a>
        </div>
    </li>
</div>

$（'。navlink'）。mouseenter（）でその下のサブメニューが表示され、$（'。navlink'）。mouseleave（）でその下のサブメニューが消えるようにするためにjqueryを使用したいと思います。どうすればいいですか？私はjqueryを初めて使用し、セレクターが苦手です。

4

3 に答える 3

2

次のスクリプトを試してください。

$(document).ready(function () { 
    var speed = 500;//The speed is in milliseconds 
    $('li').hover(function () {
         //show its submenu
         $(this).children('.submenu').stop().slideDown(speed);
        },
        function () {
         //hide its submenu
         $(this).children('.submenu').stop().hide(speed);      
     });
});​

ホバー機能を使用しました.1つ目はfunction(){...onMouseEnterで、2つ目function(){...はonMouseLeaveです。また、サブメニューが である必要があることも覚えておいてdisplay:noneください。

前のコードの先頭に次のコードを追加することで、JavaScript でこれを行うことができます。

$('.submenu').hide();

ただし、CSS を使用してそれらを非表示にすることをお勧めします。

.submenu{
  display:none
}

JavaScript に追加の関数を追加する必要はありません。

JSfiddleをチェックして、このコードの動作を確認してください。

于 2012-06-30T04:36:46.330 に答える
0

ワーキングデモ http://jsfiddle.net/QYEWs/

使用している Jquery コードについて何も言及していないため、jsfiddle で言及されているコードを使用してください。

動作デモが役立つはずです。

これは、Jquery を開始するのに適した場所ですhttp://jquery.com/

コード

// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();

// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
    over: function(){
        // Find the hovered menu's sub-menu
        var $submenu = $(this).find('.sub-menu');

        // Stop the animation and fade out the other submenus
        $('.sub-menu').not($submenu).stop(true,true).fadeOut(260);

        // Fade in the current one
        $submenu.fadeIn(260);
    }
});

// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
    // Fade out all inactive submenus
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);

    // Fade in the active one
    $('.current-menu-parent .sub-menu').fadeIn(260);
});​
于 2012-06-30T04:34:38.403 に答える
-1

それを表示するには（すでにサブメニューが非表示になっていると仮定します）、次のようなことができます

$('.navlink').hover(function(){
   $(this).siblings('submenu').show();
})

問題は、サブメニューにアクセスするにはナビリンクを離れる必要があるため、ナビリンクを離れるときに非表示にしたくないことです。したがって、非表示部分を親 LI にアタッチする必要がある可能性があります。

また、キーボードやタッチ デバイスなど、マウスを使用しないデバイスについても考慮する必要があります。

于 2012-06-30T04:34:00.450 に答える