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

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

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

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

Q&A

解決済

1回答

984閲覧

スマホページ用のアコーディオンメニューでaリンクを機能させたい

greystar

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2019/03/29 13:58

編集2019/03/29 14:18

前提・実現したいこと

スマホページを作成していて、アコーディオンメニューを設置しようとしています。

発生している問題・エラーメッセージ

アコーディオンメニューとしては、クリックしてサブメニューが出ているので問題ないのですが、
サブメニュー内のリンクを押しても反応がありません。
<a></a>が機能しなくて困っています。

スマホ用には何かコードの追加が必要なのでしょうか?

該当のソースコード

html

1 <ul class="accordion"> 2 <li><div class="menu">カテゴリーをさらに絞り込む<span class="icon"></span></div> 3 <ul class="subMenu"> 4 <li><a href="/smartphone/page2.html">リンク1</a></li> 5 <li><a href="/smartphone/page3.html">リンク2</a></li> 6 <li><a href="/smartphone/page4.html">リンク3</a></li> 7 <li><a href="/smartphone/page5.html">リンク4</a></li> 8 </ul> 9 </li> 10 </ul>

CSS

1.accordion { 2 width: 100%; 3 margin: auto; 4} 5.menu { 6 position: relative; 7 padding: 3% 0 3% 5%; 8 background: #777; 9 color: #fff; 10 list-style: none; 11} 12 13.icon { 14 display: block; 15 position: absolute; 16 top: 0; 17 bottom: 0; 18 right: 20px; 19 width: 10px; 20 height: 2px; 21 margin: auto; 22 background: #fff; 23 content: ""; 24 transition: all 0.3s; 25} 26 27.icon::before { 28 display: block; 29 position: absolute; 30 top: 0; 31 bottom: 0; 32 right: 0; 33 left: 0; 34 width: 2px; 35 height: 10px; 36 margin: auto; 37 background: #fff; 38 content: ""; 39} 40 41.active .icon { 42 -webkit-transform: rotate(-45deg); 43 transform: rotate(-45deg); 44} 45.subMenu { 46 display: none; 47 padding: 3% 0 3% 5%; 48 background: #777; 49} 50.subMenu li { 51 padding: 2% 0; 52 color: #fff; 53 overflow:wrap; 54} 55 56.subMenu li a{ 57 color:#fff; 58}

Java

1 2$(function() { 3 $('.accordion li').click(function() { 4 $(this) 5 .children('.subMenu').slideToggle(); 6 7 if ($(this).children('.menu').hasClass('active')) { 8 $(this).children('.menu').removeClass('active'); 9 } else { 10 $(this).children(".menu").addClass("active"); 11 } 12 13 return false; 14 }); 15});

試したこと

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

m.ts10806

2019/03/29 14:05

コードはマークダウンのcode機能を用いてご提示ください
greystar

2019/03/29 14:19

教えていただきありがとうございます!! 早速修正いたしました。
guest

回答1

0

ベストアンサー

A要素の時 return false しないようにすれば良いです。

js

1$(function() { 2 $('.accordion li').click(function(e) {// ← 変更 3 $(this).children('.subMenu').slideToggle(); 4 if ($(this).children('.menu').hasClass('active')) { 5 $(this).children('.menu').removeClass('active'); 6 } else { 7 $(this).children(".menu").addClass("active"); 8 } 9 if (e.target.tagName !== 'A' ) return false;// ← 変更 10 }); 11}); 12```**動くサンプル:**[https://jsfiddle.net/j1rhk5mq/](https://jsfiddle.net/j1rhk5mq/)

投稿2019/03/30 02:34

kei344

総合スコア69366

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

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

greystar

2019/03/30 03:16

なおりました!! return falseのところを理解していませんでした。 助かりました・・・ご回答、本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問