0

メニューのコーディングには、よりトリッキーなアプローチを採用することにしました。自分を苦しめるのが好きなようです。

とにかく、div メニューを作成しました。

<div class="menu-bar">
    <div class="menu-item"><span class="menu-text">HOME</span></div>
    <div class="menu-item"><span class="menu-text">ABOUT US</span>
        <div class="sub-menu-items">
            <div class="sub-menu-item">History</div>
            <div class="sub-menu-item">Mission, vision and values</div>
            <div class="sub-menu-item">B-BBEE</div>
            <div class="sub-menu-item">Team</div>
            <div class="sub-menu-item">Professional Affiliations</div>
        </div>
    </div>
    <div class="menu-item"><span class="menu-text">SECTORS</span></div>
    <div class="menu-item"><span class="menu-text">SERVICES</span></div>
    <div class="menu-item"><span class="menu-text">CSR</span></div>
    <div class="menu-item"><span class="menu-text">PROJECTS</span></div>
    <div class="menu-item"><span class="menu-text">SUSTAINABILITY</span></div>
    <div class="menu-item"><span class="menu-text">CONTACT US</span></div>
</div>

私の問題はサブメニューに含まれています.sub-menu-items。マウスが About us ブロックからサブメニューに移動した後、開いたままにする方法がわかりません。

私が持っている現在のJavascriptコードは次のとおりです。

$('.sub-menu-items').hide();
$('.menu-text').hover(function(e) {
// Show highlight
    $(this).toggleClass('menu-text-hover');
    $(this).parent().toggleClass('menu-item-hover');
    if($(this).html().indexOf('ABOUT',0) !== -1)
        $('.sub-menu-items').show('fast');
},function(e) {
// Hide highlight
    $(this).toggleClass('menu-text-hover');
    $(this).parent().toggleClass('menu-item-hover');
    if($(this).html().indexOf('ABOUT',0) !== -1)
        $('.sub-menu-items').hide('fast');
});

そして、ここに私のCSSがあります:

.menu-bar           { position:absolute; top:159px; height:54px; width:1024px; background-color:#fafafa; z-index:2; }
.menu-item          { display:table-cell; vertical-align:middle; position:relative; left:79px; height:54px; text-align:center; width:105px; border-right:dotted thin #000; border-bottom:dotted thin #000; background-color:#fafafa; }
.menu-item-hover    { border-bottom:none; }
.menu-text          { display:table-cell; vertical-align:middle; height:52px; width:101px; position:relative; left:2px; top:1px; text-align:center; border-top-right-radius:0px; margin-left:2px; margin-top:2px; margin-right:2px; }
.menu-text-hover    { border-top-right-radius:20px; background-color:#445921; color:#fff; cursor:pointer; }

.sub-menu-items     { position:absolute; display:inline-block; top:55px; width:105px; background: rgba(255, 255, 255, 0.8); font-size:12px; z-index:100; }
.sub-menu-item      { background:url(../images/devider-horizontal.png) no-repeat center top; display:block; height:40px; }
.sub-menu-item:last { background-image:none; display:block; height:40px; }

マウスがまだ上にあるときにドロップダウンメニューを表示したままにするという私の目標を達成するのを手伝ってくれる人はいますか?

4

2 に答える 2

3

コードを少し再構築できます。

$('.sub-menu-items').hide();
$('.menu-item').hover(function(e) {
    var el = $(this).children(".menu-text");
    el.toggleClass('menu-text-hover');
    $(this).toggleClass('menu-item-hover');
    if (el.html().indexOf('ABOUT', 0) !== -1)
        $(this).find('.sub-menu-items').show('fast');
}, function(e) {
    var el = $(this).children(".menu-text");
    el.toggleClass('menu-text-hover');
    $(this).toggleClass('menu-item-hover');
    if (el.html().indexOf('ABOUT', 0) !== -1)
        $(this).find('.sub-menu-items').hide('fast');
});​

デモ：http： //jsfiddle.net/vnRV4/

良い問題はコメントで@epascarelloを提起しました。divブロックではなく、ネストされたリストを使用することをお勧めします。さらに、ページの読み込み時にフラッシュを防ぐために$('.sub-menu-items').hide()、CSSスタイルに置き換えることをお勧めします。.sub-menu-items { display: none; }

于 2012-05-25T13:27:07.290 に答える
0

これでsetTimeoutとフラグチェックを使用できます。

関数の外:

var submenuhovered=false;

非表示機能について:

setTimeout(function(){
    if(submenuhovered==false){
        $(this).siblings(".sub-menu-items").hide();
    }
},200);

サブメニューのマウスオーバー機能

submenuhovered = true;

サブメニューのマウスアウト機能について

submenuhovered = false;

または、グローバル変数の代わりにメニュー要素の .data() コレクションを使用できます。

$("menu").data("submenuhovered","true");
于 2012-05-25T13:34:51.483 に答える