メインメニューをマウスオーバーしてサブメニューが表示されるが、サブメニューが消えるタイミングがおかしい
解決済
回答 2
投稿
- 評価
- クリップ 1
- VIEW 3,626

退会済みユーザー
Wordpressを使っています。
ふつう、サブメニューがマウスオーバーで表示されたら、それが消えるタイミングは、「サブメニューからマウスを離したとき」だと思います、が、なぜか、「メインメニューからマウスを離したとき」に消えてしまいます。
つまり、サブメニューをクリックできないんです。
なぜなら、マウスをメインメニューから話した途端に、サブメニューが消えてしまうためです。サブメニューの部分にマウスはあるのに、です。
この困った仕様は、一体どこを治せばいいのでしょうか?
まとめますと、
【現状】
メインメニューAにマウスオーバーしてサブメニューXYZが表示されるが、XYZをクリックするためにマウスをメニューAから移動させてXYZに移すと、XYZが消えてしまう。
【希望】
一度サブメニューXYZが表示されたら、「メニューAからマウスを離したとき」ではなく、「サブメニューXYZから離したとき」に、XYZが消えるようにしたい。
ということです。
いま、javascriptはこうなっています。
(function() {
$( '#navigation .current-menu-item' ).parents( '.sub-menu' ).show()
.prev( '.submenu-switch' ).find( '.fa' ).removeClass( 'fa-angle-down' ).addClass( 'fa-angle-up' );
$( '#navigation .submenu-switch' ).hover(function() {
var $switch = $(this);
$switch.next( '.sub-menu' ).toggle( 500, function() {
$switch.find( '.fa' ).toggleClass( 'fa-angle-down fa-angle-up' );
if ( 'true' == $switch.attr( 'aria-expanded' ) ) {
$switch.attr( 'aria-expanded', 'false' );
} else {
$switch.attr( 'aria-expanded', 'true' );
}
$screenReader = $switch.find( '.screen-reader-text' );
if ( aesblo.expandMenu == $screenReader.text() ) {
$screenReader.text( aesblo.collapseMenu );
} else {
$screenReader.text( aesblo.expandMenu );
}
});
});
})();
PHPはこうです。
<div class="sidebar-buttons clearfix">
<?php if ( is_active_sidebar( 'secondary-sidebar' ) ) : ?>
<button type="button" class="active-secondary-sidebar button-toggle">
<span class="screen-reader-text"><?php _e( 'Toggle to the secondary sidebar', 'aesblo' ); ?> </span>
<span class="fa fa-ellipsis-h fa-2x"></span>
</button>
<?php endif; ?>
<button type="button" class="close-primary-sidebar button-toggle">
<span class="screen-reader-text"><?php _e( 'Close the primary sidebar', 'aesblo' ); ?> </span>
<span class="fa fa-close fa-2x"></span>
</button>
</div>
HTMLはこんな感じで出力されます。
<div id="primary-sidebar-content" class="primary-sidebar-content">
<div class="sidebar-buttons clearfix">
<button type="button" class="close-primary-sidebar button-toggle">
<span class="screen-reader-text">Close the primary sidebar </span>
<span class="fa fa-close fa-2x"></span>
</button>
</div>
<nav id="navigation" class="site-navigation" role="navigation" aria-label="Primary Menu">
<ul id="ごちゃごちゃと数字と%が書いてある。。。。
お分かりになる方がもしいらっしゃいましたら、どうぞよろしくおねがいいたします。<m(__)m>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
どこかで見たような質問ですが...(笑)
それはさておき、回答に必要な部分のソースが表示されていないので、質問の内容から適当にやりたいと思われることのサンプル作りましたが、現在サイトの状態にあわせるためには、jQueryの示しているセレクタが表示されている(示している)htmlのソースが必要です。
PHPとHTMLで書いてもらっている部分は、いわゆるスイッチの部分でつまりはボタンで、それは例えばリンクであろうが画像であろうが何でも構わなくて、意味が無いとは言い切れませんが、そこが必要なのではなく、その次に書いてあるであろうnavigationの部分がどうなってるのかと、そのcssはどうなっているのかが必要です。
なぜなら、jQueryにはナビゲーションの部分と、その次にあるであろうsub-menuのことしか書いてないからです。で、そこがどのような構造になっていて、どんなcssが使われているかがわからないと内容が把握できないのではなかろうかと思います。
基本的には、.sub-menuがdisplay:none;である時に、親メニューをhoverさせ、.sub-menuに何かしらクラスをつけることでdisplay:block;にしたらサブメニューは別途何かしら操作しない限り消えません。
前回の質問で、ボタンをクリックしたら表示と言う内容のスクリプトをクリックではなくホバーさせたいと言うことだったと思いますが、クリックの場合はクリックをする毎にon・offと切り替わるのがtoggleです。hoverの場合はマウスが乗る毎にon・offが切り替わります。
なので、onした時に、表示したい要素に何かしらクラスをつけて、表示させておき、今度は消したい時に明示的に何かの操作(例えば×をクリック等)をして、つけたクラスを取り除くと言うふうにすればよいわけです。
では、なぜ現状のスクリプトでサブメニューにマウスを持って行ったら消えるのかは、hoverした要素をまたhoverしたことによってトグルがon・offの切り替えとなっているのではなかろうかと思います。
どこをどうすればそうなるかは全容がわからないと詳しくは答えられないかと思います。
どこをホバーしたらどうなるかはサイトを見てみないと質問の内容からだけではその構造が想像できませんが、必要な部分のhtmlとcssがあって、開いた時と閉じた時のスクリーンショットでもあれば更なる回答を期待できると思います。
jQueryの部分はぶっちゃけあってもなかっても良いです(笑)
必要な部分のhtmlの構造に合わせてスクリプトを書けばよいだけなので。参考程度にある方が望ましいのに違いはないと思いますけれども、それよりもナビ・サブメニュー部分のhtmlとcssです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
PHP門外漢のため、求めている方向の回答でないかもしれませんが、js(jQuery)とHTML(+適宜デザイン側(CSS)設定)で下記リンク先のように解決できるかと思います。
jQueryでプルダウンメニュー(たった5行で!) - finefinefine.jp
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/06/09 20:41
なるほど!
>では、なぜ~~
なるほど!!
どうもありがとうございます!まったく何も知らないくせに手をだすのは思いっきりオロカでした。。
けど、上記のように、仕組みがどうなっているか、というヒデキチさんの教えはとてもありがたかったです。^^
今回は、希望する機能がついている別のテーマを利用することで、解決しました。
Wordpressにはいろいろな機能のテーマがあるようで、地道に探せばいろいろ見つかりそうですね。
前回に引き続き、たびたびのご指導、誠にありがとうございます。良い週末を(*^^)v