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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

1955閲覧

ドロップダウンメニュー内のaタグが効きません。

mariko76

総合スコア22

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2020/01/18 16:02

編集2020/01/19 10:48

ナビメニューを実装するのにこちらのjQueryを参考にドロップダウンメニューを作りました。
PCではドロップダウンメニュー 、スマホではアコーディオンメニューにしたかったのでほぼ同じ動きです。
https://yori3.com/trying/drower/

ただ、実装が済んでいざURLを設定していったところaタグが効かないことに気付き、原因がわからず困っている状況です。
js初心者です。

■html

<header> <div class="toggle"> <div class="ttl-sec"> <p class="ttl-sub"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_sub.svg" alt="旅する前に読みたいパリ情報サイト"></p> <p class="ttl-main"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" class="TRIP PARIS トリップパリ"></a></p> </div> </div> <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> <label for="openSidebarMenu" class="sidebarIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> <div class="header-sec"> <nav> <ul> <li><a href="">観光地</a></li> <li class="menu_open"> <a href="">グルメ</a> <ul> <li><a href="#">カフェ</a></li> <li><a href="#">スイーツ</a></li> <li><a href="#">ショコラティエ</a></li> </ul> </li> <li class="menu_open"> <a href="">ショップ</a> <ul> <li><a href="http://fancybox.net/">インテリアショップ</a></li> <li><a href="<?php echo esc_url( home_url( '/shop/zakka/' ) ); ?>">雑貨屋さん</a></li> </ul> </li> <li><a href="http://fancybox.net/">ホテル</a></li> <li><a href="">豆知識</a></li> <li><a href="">日本で会えるパリ</a></li> <li><a href="">パリ関連本</a></li> </ul> </nav> <div class="toggle-bnr"> <ul> <li><img src="<?php echo get_template_directory_uri(); ?>/images/side_banner01.jpg"></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/side_banner01.jpg"></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/side_banner01.jpg"></li> </ul> </div> </div> </header>

■css

header{ width: 100%; border-bottom: 1px #d9d9d9 solid; } header .ttl-sec{ padding-top: 40px; border-top: 7px #f6c7d0 solid; } header .ttl-sec .ttl-sub{ width: 250px; margin: 0 auto; } header .ttl-sec .ttl-main{ width: 310px; margin: 5px auto 0; } header input{ display: none; } header nav > ul{ width: 1080px; margin: 20px auto 0; padding: 0 0 15px; font-size: 14px; font-weight: 500; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } header nav > ul > li{ position: relative; padding-right: 50px; } header nav > ul > li:last-child{ padding-right: 0; } header nav > ul > li > ul { display: none; position: absolute; top: 40px; width: 250px; padding: 20px; margin-left: -20px; background-color: rgb(255, 255, 255, 0.9); } header nav > ul > li li > a { display: block; width: 100%; padding: 0; line-height: 2.5; } header a{ color: #000; } header a:hover{ color: #da7575; text-decoration: none; } header .header-sec{ z-index: 999; } header .header-sec .toggle-bnr{ display: none; } @media screen and (max-width:768px) { header{ width: 100%; } header .toggle { width: 100%; display: block; margin: 0 auto; max-width: 100%; box-shadow: none; background-color: #fff; position: fixed; height: 60px!important; overflow: hidden; z-index: 10; border-bottom: 1px #d9d9d9 solid; } header .header-sec { height: 100%; position: fixed; right: 0; width: 300px; margin-top: 60px; transform: translateX(300px); transition: transform 250ms ease-in-out; background-color:rgba(255,255,255,1); } header .header-sec .toggle-bnr { display: block; padding: 20px; } header .header-sec .toggle-bnr ul li{ margin-bottom: 10px; } header .ttl-sec{ padding-top: 0; margin-top: 0; border-top: 5px #f6c7d0 solid; border-bottom: 1px #d9d9d9 solid; padding-bottom: 15px; } header .ttl-sec .ttl-sub{ width: 140px; margin: 0 auto; } header .ttl-sec .ttl-main{ width: 140px; margin: 0 auto; } header nav > ul{ width: 100%; font-weight: 400; margin: 20px 0 0; display: block; padding: 0; } header nav > ul > li{ margin: 0 20px; padding: 0; line-height: 40px; border-top: 1px #ccc solid; } header nav > ul > li:last-child{ margin: 0 20px; border-bottom: 1px #ccc solid; } header nav > ul > li > ul { position: relative; top: 0; margin-left: 0; width: 100%; padding: 0 0 15px; } header nav > ul > li.menu_open a{ display: block; width: 100%; } header nav > ul > li li > a { } header nav > ul > li.menu_open:after { content: ""; width: 18px; height: 18px; position: absolute; background: url(images/icon_plus.svg) 0 0 no-repeat; top: 11px; right: 0; } header nav > ul > li.active:after { content: ""; width: 18px; height: 18px; position: absolute; background: url(images/icon_minus.svg) 0 0 no-repeat; top: 11px; right: 0; } header input[type="checkbox"]:checked ~ .header-sec { transform: translateX(0); } header input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none; } header .sidebarIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 22px; right: 15px; height: 22px; width: 22px; } header .spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 2px; width: 100%; background-color: #000; } header .horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 5px; } header .diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left; } header .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 5px; } header input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0; } header input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px; } header input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px; } }

■js

jQuery(document).ready(function($){ // アコーディオンメニュー var opener = close;//flagでクリックしたときのアコーディオンの開くまでの時間を調節 //ウィンドウサイズ640px以下の時の動作 $('nav>ul>li>a').on('click',function(){ var winWidth = $(window).width(); if(winWidth < 700){//ウィンドウサイズ640px以上なら if($(this).hasClass('open')){//クリックした要素がopenクラスを持っているなら $(this).removeClass('open'); $(this).next('ul').slideUp(); opener = close; } else{//クリックした要素がopenクラスを持っていないなら var timer;//アコーディオンが開くまでの遅延時間 console.log(opener); if(opener !== close){ timer = 500; }else{ timer = 0; } $('.open').removeClass('open'); $('nav>ul>li>a').next('ul').slideUp(); var self =this; setTimeout(function(){ $(self).addClass('open'); $(self).next('ul').slideDown(); },timer); opener = open; } event.preventDefault(); }else{//ウィンドウサイズ640px以下なら return false; } }); //ウィンドウサイズ640px以上の時の動作 $('nav>ul>li').on('mouseover',function(){//マウスをのせたとき var winWidth = $(window).width(); if(winWidth > 700){//ウィンドウサイズ640px以上なら if(!$(this).children('a').hasClass('open')){ $(this).children('a').addClass('open'); $(this).children('ul').stop().slideDown(); } }else{//ウィンドウサイズ640px以下なら return false; } }).on('mouseout',function(){ var winWidth = $(window).width(); if(winWidth > 700){//ウィンドウサイズ640px以上なら $(this).children('a').removeClass('open'); $(this).children('ul').stop().slideUp(); }else{//ウィンドウサイズ640px以下なら return false; } }); $('nav>ul>li').on('click',function(){ var winWidth = $(window).width(); if(winWidth < 700){//ウィンドウサイズ640px以下なら $(this).toggleClass("active"); }else{//ウィンドウサイズ640px以上なら return false; } }); });

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

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

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

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

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

kei344

2020/01/18 16:07

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
mariko76

2020/01/18 17:35

不慣れで大変失礼いたしました! 囲むことができました。汗
kei344

2020/01/18 17:48

変数「close」がどこにも定義されていません。ここに提示していないコードにあるのでしょうか。 また、WordPressっぽい関数名がありますが、もしその場合jQueryの書き方が違うと思うのですが、エラーは出ていませんか?デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
mariko76

2020/01/19 04:45

wordpressに導入しているので、実際にはjsの最初に ----- jQuery(document).ready(function($){ ----- を入れています。(すみません、編集画面にて追記しました。) なので、jsは特にエラーが出ておらずドロップダウンメニュー も動いています。 aタグをマウスオーバー するとリンク先がブラウザの下部に表示されるにもかかわらず、クリックできない状態です。 変数「close」ですが、どのように追加したらいいのでしょうか…。 jsに関しては記載したコード以外、定時していないものは何もありません。
kei344

2020/01/19 04:55

「クリックできない」は全てのリンクについてでしょうか。メニューの無いリンク部分だけでは?
mariko76

2020/01/19 08:58

aタグを入れたところもクリック出来なくて困っております。汗 「雑貨屋さん」
kei344

2020/01/19 10:07

https://jsfiddle.net/r0j1ndqw/ 少なくとも提示された内容では.menu_open内に有るリンクは動作します。他のスクリプト等は使用されていませんか?
mariko76

2020/01/19 10:50

@kei344さん ご丁寧にありがとうございます>< 本当ですね、動作しますね。。。 そうなるとcssのせいでしょうか、、、と思い、cssも追記させていただきました。 (合わせてhtmlも<header>タグからのものに修正しました。) 何かわかるとありがたいです><
mariko76

2020/01/20 03:11

無事解決できました、見ていただきありがとうございました><
guest

回答1

0

ベストアンサー

$('nav>ul>li').on('click'

のelse内のreturn falseをコメントアウトしてください

投稿2020/01/20 00:52

yambejp

総合スコア114585

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

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

mariko76

2020/01/20 03:11

そちらを削除したら解決しました…! ありがとうございました><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問