0

私はcssクラスを使用しています：

#navbar .current-menu-ancestor ul.sub-menu {display:inline;}

そのページのサブメニューをスティッキーにします。

他のトップレベルのメニュー項目にカーソルを合わせる場合は、（jQueryを介して）非表示にする必要があります。

例：

トップアイテム1-
メニュー1a-
メニュー1b
トップアイテム2
トップアイテム3-
メニュー3a-メニュー
3b-
メニュー3c

メニュー1bのページを表示している場合は、トップアイテム1のすべてのサブメニューが表示されています。
トップアイテム3にカーソルを合わせて、そのサブメニューを表示し、「アクティブな」サブメニューを非表示にする必要があります。

（これらは、背景が透明な水平サブメニューです...）

4

2 に答える 2

1

より実行可能かもしれないCSSを介してこれを行う方法があります。

Red Team Design.comは、目標を達成するための非常に人気のある方法をいくつか投稿しています。

これは優れた例であり、便利なチュートリアルも提供します。ただし、絶対にjqueryを使用する必要がある場合（たとえば、これが何らかの割り当てである場合）、複雑なコードを避けるためにクリックイベントに固執しますが、これも本当に怠惰です:)

あなたは簡単にこのようなことをすることができます：

デモ： http： //jsfiddle.net/jrb9249/5n5Bp/4/

HTML：

<html>
    <body>
        <div class="div_parent">
            <ul class="top_menu">
                <li><a href="#">Home</a></li>
                <li id="shop_li"><a href="#" onClick="javascript:mouseEvent('#shop_div')">Shop</a>
                    <div class="sub_div" id="shop_div">
                        <ul id="shopmenu" class="sub_menu">
                            <li>Electronics</li>
                            <li>Software</li>
                            <li>Mail-Order Brides</li>
                            <li>Insert bazaar product here</li>
                        </ul>
                    </div>
                </li>
                <li id="contact_li"><a href="#" onClick="javascript:mouseEvent('#contact_div')">Contact Us</a>
                    <div class="sub_div" id="contact_div">
                            <ul id="contactmenu" class="sub_menu">
                                <li>Email</li>
                                <li>Phone</li>
                            </ul>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

Javascript：

var anim;

$(document).click(function(event){
    if(event.target.nodeName != 'LI' && (anim==0)){
        $('.sub_div').fadeOut('fast');
    };
});

anim = 0;
function mouseEvent(myid){
    $('.top_menu li > div').each(function(){
        $(this).fadeOut('fast');
    });
    anim = 1;
    $(myid).fadeIn('fast', function(){
        anim = 0;
    });
};

CSS：

.div_parent
{
    background:transparent;
    padding:5px;
    margin:0px;
    float:left;
    border:solid 1px gray;
}

.sub_div
{
    paddin:0px;
    margin:0px;
    position:absolute;
    margin-top:3px;
    display:none;
}


.top_menu, .sub_menu
{
    margin:0px;
    padding:0px;
    background:transparent;
}

.top_menu li
{
    float: left;
    display:inline;
    margin:0px 5px 0px 5px;
}

a:link,a:active,a:visited
{
    color:blue;
    text-decoration:none;
}

a:hover
{
    text-decoration:underline;
}

.sub_menu li
{
    clear:both;
    float:left;
    background:#E2EDD5;
    border:solid 1px white;
    padding:2px;
    width:150px;
}

.sub_menu li:hover
{
    cursor:pointer;
    background:#FFFFE8;
}

これは、jqueryのfadeOutアニメーション（単純）と変数「anim」を使用して、フォームを開くときと閉じるときの競合を回避します。そしてCSSはあなたのためにすべてを片付けます。このデモでは、可能な限りjqueryを使用しようとしました。お役に立てば幸いです。幸運を。

于 2012-12-28T17:01:50.680 に答える
0

.mouseleave()イベントsmthにバインドします。に似ている

$('.main_menu_container').mouseleave( function () {
    $(this).children('.submenu').hide();
});
于 2012-12-28T15:14:30.867 に答える