2

そのため、他のメニュー項目にカーソルを合わせたときに、アクティブなメニュー項目のクラスを削除するためのスクリプトを少し見つけようとしています。しかし、私がナビゲーションから離れるときにそれを復元します。トリッキーな部分は、現在アクティブなアイテムにアクティブなサブメニューがある場合にスクリプトがトリガーされないようにすることです。

たとえば、4つのメニュー項目（メイン1、メイン2、メイン3、メイン4）があります。2つにはサブメニューがあります（メイン2、メイン4）。メイン1は現在アクティブであり、activeという名前のクラスがあります。メイン2にカーソルを合わせるとサブメニューが表示され、メイン2にカーソルを合わせると、ホバークラスとハイライトクラスが表示されますが、メイン1は通常の在庫に戻ります。ここで、ナビゲーションから離れると、メイン1はアクティブなクラスに戻り、メイン2は通常のように見えます。

同じ設定を行い、メイン2をアクティブにして、デフォルトでサブメニューを表示します。Main 1 Main 3 Main 4にカーソルを合わせると、サブメニューが閉じ、Main 2のアクティブなクラスが削除されますが、離れると、アクティブに戻り、サブメニューが表示されます。これで、メイン2にカーソルを合わせるか、サブメニューのサブメニューにカーソルを合わせると、クラスが変更されることはなく、同じままになります。

私は似たような設定を広範囲に検索しましたが、何も見つかりませんでしたが、ここで見つけることができる以前の質問に投稿したもの以外はすべてのものを投げましたが、運が悪ければstopPropagation（）でこれはこのプロジェクトのコードは間違っていますが、はるかに異なるプロジェクトで機能しました。すでに回答済みとしてマークされている場合、他の人に投稿できるかどうかわからなかったため、これについて2番目の質問をしました。

事前に感謝し、私が助けを得ることを願っています、
タイラー

編集：ここ にjsfiddleの古いスクリプトへのリンクがあります更新：2011年4月30日

4

1 に答える 1

1

これはワードプレスでのみ機能することに注意して
ください。メジャーでない限り、このコードではなくjsfiddleに編集を投稿してください

さて、ようやく作業メニューができました。私はいくつかの深刻な検索を行い、修正を見つけました。今、それが正しいかどうかはわかりませんが、私が望むように動作します。どなたでもお気軽にご利用ください。WordPressで使用されているので、数行のコードを追加する機能があり、以下にも投稿します。

これが私がWordPressに追加した関数です：

function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'active active-menu';
    }
    return $classes;
}  
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

上記のコードはwordpress3.0以降用です

これにより、現在のメニュー項目にクラスが追加されます

これまでのところ、jQUERYは一種のクラスターを追加しており、おそらくそれをすべてマージして1つとして機能させる方法がありますが、これを行う方法はわかりませんが、ここにコードを投稿してから、デモをjsfiddle

これが私がつなぎ合わせたjQUERYスクリプトで、デモで見つかった効果を追加します。

これにより、すべての親アイテムと非親アイテムに.not-activeクラスが追加されます。

$('*:not(li) > ul#navbar > li').addClass('not-active');

これにより、すべてのul.sub-menuに.child-menuクラスが追加されます。

$('ul.sub-menu').children().addClass('child-menu');

これにより、各サブメニューの最初の子アイテムに.first-childクラスが追加されます（スタイルを追加するために追加されます）。

$('#navbar ul.sub-menu :first-child').addClass('first-child');

これにより、各サブメニューの最後の子アイテムに.last-childクラスが追加されます（スタイルを追加するために追加されます）。

$('#navbar ul.sub-menu :last-child').addClass('last-child');

これにより、アクティブなメニューの.not-activeクラスが切り替わります（以下の最後のスクリプトでは.not-activeが削除されます）。

$("#navbar li.active").toggleClass("not-active");

これにより、アクティブな子メニューでクラス.not-activeが切り替わります（以下の最後のスクリプトでは.not-activeが削除されます）。

$('#navbar ul.sub-menu li.active').toggleClass("not-active");

これにより、.current-menu-parentが存在する場合、.parent-activeクラスが追加されます。

$('ul#navbar li.current-menu-parent').addClass('parent-active');

これにより、li.current-menu-parent ul.sub-menuが存在する場合、.child-activeクラスが追加されます。

$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');

*これにより、子メニューにカーソルを合わせると、親に.hiliteクラスが追加されます。*

$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);

これにより、他のメニュー項目にカーソルを合わせるとアクティブメニューの.activeクラスが削除されますが、アクティブ項目またはアクティブ項目の子項目にカーソルを合わせると使用されません。

$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
    },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
   }
);

これでjQUERYができたので、参照用にcssとhtmlを取得します。

これがcssです：

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

読むのはかなり簡単なはずです

これがhtmlです：

<div id="navigation">
    <ul id="navbar">
        <li class="not-active"><a href="#">Main 1</a></li>
        <li class="active active-menu"><a href="#">Main 2</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                <li class="child-menu"><a href="#">Sub 2</a></li>
                <li class="child-menu last-child"><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li class="not-active"><a href="#">Main 3</a></li>
        <li class="not-active"><a href="#">Main 4</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                <li class="child-menu"><a href="#">Sub 5</a></li>
                <li class="child-menu last-child"><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>
</div>

このコードを自由に使用してください。これらのスクリプトをすべてグループ化する簡単な方法を見つけた場合は、実行してください。

ここJSFIDDLEでライブデモを見ることができます

于 2011-04-30T22:06:32.357 に答える