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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1058閲覧

スマホのアコーディオンメニューで、スクロールとタップを分けたい

takawork

総合スコア95

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/09 09:17

編集2022/01/12 10:55

アコーディオンメニューでPC版では問題ないのですが、
スマホ版だと、
スクロールするためにアコーディオンメニュー(h2)の部分のスクリーンを触ると、アコーディオンが開いてしまいます。

https://foundfund.jp/
理想としては上記サイトの「よくある質問」(最下部らへん)のアコーディオンメニューのような、
スクロールするために質問タイトルを触ってもアコーディオンメニューが開かずに、
「開けよう!」と思ってタップすると開くような仕様にしたいのですが、@-webkit-keyframesらへんの数値をいじってもうまく行きませんでした。

伝わりにくいかも知れないですが、よろしくお願いします。
ちなみに以下のアコーディオンメニューを使ってます。
https://codepen.io/chriswrightdesign/pen/cmanI

<section class="question-content"> <div class="question-content-wrap"> <div class="question-content-wrap-list"> <div class="question-content-wrap-list-container"> <div class="accordion"> <dl> <dt> <h2 aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger"> 詳しいPDF資料はありますか?</h2> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> <p>はい。<br>ダウンロードはから出来ます。</p> </dd> <dt> <h2 aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger"> 詳しいPDF資料はありますか?</h2> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> <p>はい。<br>ダウンロードはから出来ます。</p> </dd> <dt> <h2 aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger"> 詳しいPDF資料はありますか?</h2> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> <p>はい。<br>ダウンロードはから出来ます。</p> </dd> </dl> </div> </div> </div> </div> </section>
.question-content { height: auto; padding-bottom: 30px; background-color: white; border: 1vw solid #02007F; } .question-content-wrap { max-width: 1080px; margin: 0 auto; } .question-content-wrap-ttl { text-align: center; padding: 40px 0px; } .question-content-wrap-ttl h1 { font-weight: bold; font-size: 34px; margin-bottom: 0px; } .question-content-wrap-ttl p { font-size: 22px; font-weight: bold; margin-bottom: 0px; } .accordion dd, .accordion__panel { background-color: #eee; line-height: 1.5em; } .accordion h2 { font-size: 23px; font-weight: bold; margin-bottom: -7px; -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; } .accordion p { padding: 20px; margin-bottom: 0px; font-weight: bold; } dt, dd { margin-left: 0px; } .accordion { position: relative; background-color: #eee; } .question-content-wrap-list-container { max-width: 960px; margin: 0 auto; } .accordionTitle, .accordion__Heading { background-color: #02007F; text-align: left; font-weight: 700; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; /* 横並び */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* 上下中央配置 */ text-decoration: none; color: #fff; -webkit-transition: background-color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out; } .accordionTitle:after, .accordion__Heading:after { content: "+"; font-size: 2.5em; line-height: 0.5em; margin-left: auto; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .accordionTitle:hover, .accordion__Heading:hover { color: orange; -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; } .accordionTitle:before, .accordion__Heading:before { content: "Q"; font-size: 48px; padding-right: 20px; line-height: 0.5em; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .accordionText { text-align: left; font-weight: 700; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; /* 横並び */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* 上下中央配置 */ text-decoration: none; } .accordionText:before { content: "A"; font-size: 48px; padding-right: 20px; line-height: 0.5em; } .accordionTitleActive, .accordionTitle.is-expanded { color: orange; } .accordionTitleActive:after, .accordionTitle.is-expanded:after { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } .accordionItem { height: auto; overflow: hidden; max-height: 50em; -webkit-transition: max-height 1s; transition: max-height 1s; } @media screen and (min-width: 48em) { .accordionItem { max-height: 15em; -webkit-transition: max-height 0.5s; transition: max-height 0.5s; } } .accordionItem.is-collapsed { max-height: 0; } .no-js .accordionItem.is-collapsed { max-height: auto; } .animateIn { -webkit-animation: accordionIn 0.45s normal ease-in-out both 1; animation: accordionIn 0.45s normal ease-in-out both 1; } .animateOut { -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1; animation: accordionOut 0.45s alternate ease-in-out both 1; } @-webkit-keyframes accordionIn { 0% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes accordionIn { 0% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes accordionOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); } } @keyframes accordionOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); } }
// よくある質問のアコーディオン jQuery(function(){ var d = document, accordionToggles = d.querySelectorAll('.js-accordionTrigger'), setAria, setAccordionAria, switchAccordion, touchSupported = ('ontouchstart' in window), pointerSupported = ('pointerdown' in window); skipClickDelay = function(e){ e.preventDefault(); e.target.click(); } setAriaAttr = function(el, ariaType, newProperty){ el.setAttribute(ariaType, newProperty); }; setAccordionAria = function(el1, el2, expanded){ switch(expanded) { case "true": setAriaAttr(el1, 'aria-expanded', 'true'); setAriaAttr(el2, 'aria-hidden', 'false'); break; case "false": setAriaAttr(el1, 'aria-expanded', 'false'); setAriaAttr(el2, 'aria-hidden', 'true'); break; default: break; } }; //function switchAccordion = function(e) { console.log("triggered"); e.preventDefault(); var thisAnswer = e.target.parentNode.nextElementSibling; var thisQuestion = e.target; if(thisAnswer.classList.contains('is-collapsed')) { setAccordionAria(thisQuestion, thisAnswer, 'true'); } else { setAccordionAria(thisQuestion, thisAnswer, 'false'); } thisQuestion.classList.toggle('is-collapsed'); thisQuestion.classList.toggle('is-expanded'); thisAnswer.classList.toggle('is-collapsed'); thisAnswer.classList.toggle('is-expanded'); thisAnswer.classList.toggle('animateIn'); }; for (var i=0,len=accordionToggles.length; i<len; i++) { if(touchSupported) { accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); } if(pointerSupported){ accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); } accordionToggles[i].addEventListener('click', switchAccordion, false); } })();

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問