アコーディオンメニューで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); } })();
あなたの回答
tips
プレビュー