トグルのクリックによって表示されるのではなく、マウスオーバーによって表示させたい。

Question

Wordpressのテーマで、下記のように変更を希望しています。

【現状】
メニューのトグルをクリックすると、サブメニューが出てくる。

【希望】
メニューにマウスオーバーするだけで、サブメニューが出てくる。サブメニューからマウスを離すと表示は消える。(トグルさんには消えていただきたい。)

---

おそらく下記のjavulascriptとPHPのあたりを変えればいいのかな、、??
と思っているのですが、
どこをどうすればいいのでしょうか？

【現状のjavascriptとPHP】

(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' ).click(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 );
					}
				});
			});
			
		})();

		<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>

まったく要領をえない質問でまことにすみません。
「詳しい人だと見ればわかるのかもな」という、なんとも安易な発想と甘えた根性でダメ元な質問です。
どなたかお詳しい方が、もし、いらっしゃいましたらよろしくお願いいたしますm(__)m

追記です。
【出力された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="ごちゃごちゃと数字と％が書いてある。。。。

Comments

[kei344]

出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

[退会済みユーザー]

この部分でよろしいでしょうか？質問文に追記いたしました。
いまいち対応する部分がわかっておらず、的外れな追記でしたらもうしわけございません。。

[kei344]

HTMLはid="primary-sidebar-content"の閉じタグまで追記ください。

Answer 1

php側とjavascript側の相関が実際のレイアウトを見てみないとわからないのですが、

javascript側のclickとなっている部分を
$( '#navigation .submenu-switch' ).click(function() {
hoverに置き換えてみたらどうなりますでしょうか。
$( '#navigation .submenu-switch' ).hover(function() {

Comments

[退会済みユーザー]

わ！すごい！！！！！！！！！！！笑
一発でできましたぁ☆
なめらかな動作に感涙でございます。

ただ、hoverで表示されたメニューをクリックするため、その場所からマウスを離すと、表示が閉じてしまい、表示されたメニューをクリックできない様子です。(´;ω;｀)

必要なのは、出力されたHTMLさんとかいうやつですね…
ふむ。帰ったら早速調べてまたご連絡させてください(*^^)v

ふふ。うごくうごく。たのしい…

Answer 2

http://codepen.io/ChihiroTachikawa/pen/pyXdbJ
以前制作したものですが、デザインを変えて流用できませんか？

Comments

[退会済みユーザー]

ありがとうございます。
イメージはまさにそういうことなのですが、なかなか流用できるスキルがなく…(´;ω;｀)
サイトで勉強させていただきます。

[退会済みユーザー]

ちなみに「マウスオーバー時に表示されたサブメニューが消えるタイミング」についてなんですが。。

そちらのメニューでは「サブメニューからマウスを離したとき」になっていますよね。
「サブメニューが消えるタイミング」をそのようにしたい場合、お書きになっているコードのどの部分が対応しているのでしょうか？

実は、別の方のご回答によって、クリックではなくhovarにしたいという質問は解決できたのですが、その結果。
「サブメニューが消えるタイミング」が、「サブメニューからマウスを離したとき」ではなく、「元のメニューからマウスを離したとき」になってしまっているです。
つまり、サブメニューをクリックするために元のメニューからマウスを離すと、サブメニューが消えてしまうんです。笑

Answer 3

cobmさんの言われるように、元のhtmlがどうなっているかによるんですけれども、
極簡単なhoverの例を書いてみました。

あとは、実際のhtmlの状態に当てはめて書き換えるだけかと思います。
phpを提示してもらうより、現在のその部分のhtmlがあったほうがサンプルは作りやすいかと思います。

phpを見るに、ここはボタン部分ですよね？

<button type="button" class="active-secondary-sidebar button-toggle">
  <span class="screen-reader-text">ここにセカンダリメニューを表示する (アイコン)</span>
</button>

//でメニューが表示されていたらボタンの表示が
<button type="button" class="close-secondary-sidebar button-toggle">
  <span class="screen-reader-text">セカンダリメニューを閉じる (アイコン)</span>
</button>

と言う具合で、このbuttonの次に何かしらメニューが入っていると言う感じかと思います。
で、そのメニューはcss等で非表示になっていて、ボタンをクリックしたら表示に変わるだけのようなものかと思うので、サンプルのような感じで切り替えてみてはどうかと思います。

後は、font-awesomeのあたりを変更したりですが、消したり加えたりするだけなので、イケるかと。

おそらく複雑に考えすぎておられるのではないかなぁと思うんですが、まずは動作する簡単なものを書いてみて、そこに必要なものを付け足し、その後でより簡潔に書ける書き方を探すほうが良いかと思います。

ただ、buttonをhoverすると言うのよりは、やはりボタンはクリックって感じがするので、そこらをどうされるかですね。

Comments

[退会済みユーザー]

ありがとうございます。
出力されたHTMLから、書いていただいた部分を検索してみると、ありましたありました☆あるってよくわかりますねぇ。笑

だた、似たような場所が何か所かありました。

①
<li class="sq-primary-sidebar">
<button type="button" class="button-toggle">
<span class="screen-reader-text">Expand the primary sidebar </span>
<span class="fa fa-bars fa-2x q-bars"></span>
</button>
</li>

<li class="sq-search">
<button type="button" class="button-toggle">
<span class="screen-reader-text">Poppup the search form </span>
<span class="fa fa-search fa-2x q-search"></span>
</button>
</li>

②
<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>

③
<div id="secondary-sidebar" class="secondary-sidebar">
<div class="sidebar-buttons clearfix">
<button type="button" class="active-primary-sidebar button-toggle">
<span class="screen-reader-text">Toggle to the primary sidebar </span>
<span class="fa fa-bars fa-2x"></span>
</button>
<button type="button" class="close-secondary-sidebar button-toggle">
<span class="screen-reader-text">Close the secondary sidebar </span>
<span class="fa fa-close fa-2x"></span>
</button>
</div>

[退会済みユーザー]

このうち、どの部分をどのように…
と思ったら、

>と言う具合で、このbuttonの次に何かしらメニューが入っていると言う感じかと思います。

とおっしゃっているので、きっと②がその部分のようです。
メニューが②の後にずらっと書かれていました。

ふむふむ。とりあえず思いつく限りかたっぱしからいろんな組み合わせで改造してみます。笑

ご協力に感謝いたします！