1

次のフライアウトメニュー関数を再コーディングする方法を理解するのに助けが必要です。

var site = function() {
    this.navLi = $('#dnoa_nav li ul li').children('ul').hide().end();
    this.init();
};

site.prototype = {  
    init : function() {
        this.setMenu();
    },

    setMenu : function() {
        $.each(this.navLi, function() {
            if ( $(this).children('ul')[0] ) {
                $(this)
                .append('<span />')
                .children('span')
                .addClass('hasChildren')
            }
        });

        this.navLi.hover(function() {
            $(this).find('> ul').stop(true, true).slideDown('fast');
            },
            function() {
            $(this).find('> ul').stop(true, true).hide();       
        });
    }
}

new site();

ここで実際の動作を確認して、現在の動作を確認できます。動作を確認すると、子LIを選択すると、親LIを「スティッキー」のままにすることができないことがわかります。例：ジョブエイド>連絡先>承認済みブローカー...つまり、子LIがマウスオーバーされているとき（承認済みブローカー）、親LI（ジョブエイドと連絡先）はホバー状態のままになりません。

スクリプトで実行したいのは、子LIが選択されている間、親LIをホバー状態に保つことです。このように見える：

ここに画像の説明を入力してください

上に貼り付けた関数で何を調整できるかについてのアイデアはありますか？よろしくお願いします！

アップデート

以下は私のCSSのコピーです（そして私が混乱していないことを願っています）：

/* DNoA Nav menu */
.hasChildren {
position: absolute;
width: 11px; height: 24px;
background-image: url('/test/img/page/bkgd_navigation_subcell_hint.gif');
right : 0;
bottom: 0;
}

#dnoa_nav {
float: left;
margin: 0;
padding-top: 3px;
padding-left: 19px;
}

#dnoa_nav li a, #dnoa_nav li {
float: left;
}

#dnoa_nav li {
list-style: none;
position: relative;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.3px;
}

#dnoa_nav li a {
padding: 17px 16px;
text-decoration: none;
color: white;
}

#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

/* DNoA Nav submenu */
#dnoa_nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}

#dnoa_nav li:hover > ul {
display: block;
}

#dnoa_nav li ul li {
_display: inline; /* for IE6 */
}

#dnoa_nav li ul li a {
background: #eeeeee;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}

#dnoa_nav li ul li, #dnoa_nav li ul li a {
float: none;
background-image: none !important;
}

#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}

/* DNoA Nav subsubmenu */
#dnoa_nav li ul li ul {
display: none;
position: absolute;
left: 93%;
top: 7px;
padding: 0;
margin: 0;
border-top: 1px solid #CCCCCC;
z-index: 9999;
}

#dnoa_nav li ul li:hover > ul {
display: block;
}

#dnoa_nav li ul li ul li {
_display: inline; /* for IE6 */
}

#dnoa_nav li ul li ul li a {
background: #f8f8f8;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}

#dnoa_nav li ul li ul li, #dnoa_nav li ul li ul li a {
float: none;
background-image: none !important;
}

#dnoa_nav li ul li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}

ありがとう、

バークリー

4

1 に答える 1

0

Stack Overflowの人々が私を正しい方向に向けるのを助けてくれたという事実に基づいて、私はついに自分のやりたいことを手に入れました。調整が必要なのはCSSであり、jQuery関数ではありませんでした。私はCSSセレクターについて再学習し、「大なり記号」（ ">"）を使用すると、CSSが親ULの直接の子LIにのみ直接影響し、すべてにカスケードされないようにする方法について再学習しました。他の子のLIとUL（これは、最上位のULとLIをスタイリングしたときに発生した問題でした）。したがって、これらのステートメントは、機能するように編集されています。

#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

編集された：

#dnoa_nav li:hover > a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

この：

#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}

編集された：

#dnoa_nav li ul li:hover > a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}

CSSセレクターについて学ぶための道を案内してくれてありがとう。

バークリー

于 2012-08-21T15:17:56.217 に答える