質問

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

たとえば、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日

役に立ちましたか?

解決

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

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

WordPressに追加した機能は次のとおりです。 ジェネラコディセタグプレ

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

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

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

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

これにより、すべての親アイテムと非親アイテムに.not-activeクラスが追加されます。 ジェネラコディセタグプレ

これにより、すべてのul.sub-menusに.child-menuクラスが追加されます。 ジェネラコディセタグプレ

これにより、各サブメニューの最初の子アイテムに.first-childクラスが追加されます(追加のスタイル設定のために追加されます): ジェネラコディセタグプレ

これにより、各サブメニューの最後の子アイテムに.last-childクラスが追加されます(追加のスタイル設定のために追加されます): ジェネラコディセタグプレ

これにより、アクティブなメニューの.not-activeクラスが切り替わります(以下の最後のスクリプトでは.not-activeが削除されます): ジェネラコディセタグプレ

これにより、アクティブな子メニューの.not-activeクラスが切り替わります(以下の最後のスクリプトでは.not-activeが削除されます): ジェネラコディセタグプレ

.current-menu-parentが存在する場合、これにより.parent-activeクラスが追加されます: ジェネラコディセタグプレ

li.current-menu-parent ul.sub-menuが存在する場合、これにより.child-activeクラスが追加されます: ジェネラコディセタグプレ

* これにより、子メニューにカーソルを合わせると、親に.hiliteクラスが追加されます:* ジェネラコディセタグプレ

これにより、他のメニュー項目にカーソルを合わせるとアクティブメニューの.activeクラスが削除されますが、アクティブ項目またはアクティブ項目の子項目にカーソルを合わせると使用されません: ジェネラコディセタグプレ

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

これがcssです: ジェネラコディセタグプレ

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

これがhtmlです: ジェネラコディセタグプレ

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

ライブデモは、 JSFIDDLE でご覧いただけます。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top