質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

827閲覧

スマホのグローバルナビのプルダウン

ic-c

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/04/28 08:44

編集2020/04/28 08:46

スマホのグローバルナビゲーションにて
イメージ説明
現状は赤矢印のアイコンの部分を押すとプルダウンが開くのですが
これをこのアイコン部分だけでなくその列(業種別活用提案の文字まで含めた)
をクリックしたときにプルダウンが出るようにしたいです。

wordpressを利用しており、テーマはLighting Proです。
下記にHTML、変更前のjQuery、変更後のjQueryを載せました。
HTMLが長くなってしまうのでここではaタグのhref属性は空白にしました

変更後のjQueryでは列をクリックしても最初にifのtrueではなく、false(つまりelse文)が実行されてしまいます。
なのでif文の書き方がおかしいと思ったのですがコードはあっているような気がします。

HTML

1<ul id="menu-gnavi" class="vk-menu-acc menu vk-menu-acc-active"> 2  <li id="menu-item-4263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4263"><a href="">-----</a> 3  </li> 4  <li id="menu-item-5114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5114"> 5   <a href="">業種別活用提案</a><span class="acc-btn acc-btn-open"></span> 6   <ul class="sub-menu acc-child-close"> 7  <li id="menu-item-4822" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4822"><a href="">ーーーー</a></li> 8  <li id="menu-item-5113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5113"><a href="">ーーー</a></li> 9   </ul> 10  </li> 11  <li id="menu-item-4261" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4256 current_page_item menu-item-4261"><a href="" aria-current="page">----</a></li> 12  <li id="menu-item-4260" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4260"><a href="">----</a></li> 13 14</ul>

元々のjQueryコード

jQuery

1function vk_menu_acc_click(){jQuery('ul.vk-menu-acc li .acc-btn').click(function(){ 2 if(jQuery(this).hasClass('acc-btn-open')){ 3 jQuery(this).parent().addClass('acc-parent-open'); 4 jQuery(this).removeClass('acc-btn-open').addClass('acc-btn-close'); 5 jQuery(this).next().removeClass('acc-child-close').addClass('acc-child-open');} 6 else{ 7 jQuery(this).parent().removeClass('acc-parent-open'); 8 jQuery(this).removeClass('acc-btn-close').addClass('acc-btn-open'); 9 jQuery(this).next().removeClass('acc-child-open').addClass('acc-child-close');}});}

変更後のjQueryコード

jQuery

1function vk_menu_acc_click(){jQuery('ul.vk-menu-acc li').click(function(){ 2 var pulldown = jQuery(this).children('span') 3 if(jQuery(pulldown).hasClass('acc-btn-open')){ 4 jQuery(pulldown).parent().addClass('acc-parent-open'); 5 jQuery(pulldown).removeClass('acc-btn-open').addClass('acc-btn-close'); 6 jQuery(pulldown).next().removeClass('acc-child-close').addClass('acc-child-open');} 7 else{ 8 jQuery(pulldown).parent().removeClass('acc-parent-open'); 9 jQuery(pulldown).removeClass('acc-btn-close').addClass('acc-btn-open'); 10 jQuery(pulldown).next().removeClass('acc-child-open').addClass('acc-child-close');}});}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/04/28 08:59 編集

質問なのですが、 「<a href="">業種別活用提案</a>」ここaタグを使っているので、 「業種別活用提案」というページがあり、 クリックした時に遷移させる必要があるのでは?? >アイコン部分だけでなくその列(業種別活用提案の文字まで含めた) >をクリックしたときにプルダウンが出るように これをやると「業種別活用提案」というページに遷移できなくなります。 遷移できなくなってもOKということですか?
ic-c

2020/04/28 09:06

業種別活用提案はどこにも飛ばさないようにしてあります。 (業種別活用提案というページはそもそも存在しないという状態です) 説明不足でした。 申し訳ありません。
退会済みユーザー

退会済みユーザー

2020/04/28 09:34

ご説明ありがとうございます。 こちらで確認してみた感じでは、最初のクリックでtrueの処理が反映されていました。
ic-c

2020/04/28 09:41

確認していただきありがとうございます そうですか それだとここのjQueryの記述以外のどこかに この部分に関することが書いてあるんですかね、、、 確認してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問