Q&A
HTMLコード、CSSコードを追記してください。
アコーディオンメニューを作成してます。
コンテンツが少ないときは、通常に動作するのですが、
上記のように普通に動作します。
しかし、コンテンツが増えてくると
リンク内容
上記のように、関東地方をクリックすると
コンテンツが被ってしまいます。
どのようにすれば、コンテンツが増えてもコンテンツが被らないように出来るでしょうか？
試したこと
style:height:auto にしたら広がりましたが、アコーディオンのマイナスボタンを押しても
高さが戻りませんでした。
htmlが下記で
<div class="contents_box"> <h3 class="contentBoxTitle">対応可能エリア</h3> <div class="area_inner"> <input id="acd-check1" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check1">北海道・東北地方</label> <ul class="areaList"> <li><a href="#">北海道</a></li> <li><a href="#">宮城県</a></li> <li><a href="#">山形県</a></li> <li><a href="#">福島県</a></li> </ul> <input id="acd-check2" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check2">北陸・信越地方</label> <ul class="areaList"> <li><a href="#">新潟県</a></li> <li><a href="#">富山県</a></li> <li><a href="#">石川県</a></li> <li><a href="#">福井県</a></li> <li><a href="#">長野県</a></li> </ul> <input id="acd-check3" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check3">関東地方</label> <ul class="areaList"> <li><a href="#">茨城県</a></li> <li><a href="#">栃木県</a></li> <li><a href="#">群馬県</a></li> <li><a href="#">山梨県</a></li> <li><a href="#">埼玉県</a></li> <li><a href="#">千葉県</a></li> <li><a href="#">東京都</a></li> <li><a href="#">神奈川県</a></li> <li><a href="#">茨城県</a></li> <li><a href="#">栃木県</a></li> <li><a href="#">群馬県</a></li> <li><a href="#">山梨県</a></li> <li><a href="#">埼玉県</a></li> <li><a href="#">千葉県</a></li> <li><a href="#">東京都</a></li> <li><a href="#">神奈川県</a></li> <li><a href="#">茨城県</a></li> <li><a href="#">栃木県</a></li> <li><a href="#">群馬県</a></li> <li><a href="#">山梨県</a></li> <li><a href="#">埼玉県</a></li> <li><a href="#">千葉県</a></li> <li><a href="#">東京都</a></li> <li><a href="#">神奈川県</a></li> </ul> <input id="acd-check4" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check4">東海地方</label> <ul class="areaList"> <li><a href="#">岐阜県</a></li> <li><a href="#">静岡県</a></li> <li><a href="#">愛知県</a></li> <li><a href="#">三重県</a></li> </ul> <input id="acd-check5" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check5">関西地方</label> <ul class="areaList"> <li><a href="#">滋賀県</a></li> <li><a href="#">京都府</a></li> <li><a href="#">大阪府</a></li> <li><a href="#">兵庫県</a></li> <li><a href="#">奈良県</a></li> <li><a href="#">和歌山県</a></li> </ul> <input id="acd-check6" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check6">中国・四国地方</label> <ul class="areaList"> <li><a href="#">岡山県</a></li> <li><a href="#">広島県</a></li> <li><a href="#">山口県</a></li> <li><a href="#">愛媛県</a></li> <li><a href="#">香川県</a></li> </ul> <input id="acd-check7" class="acd-check" type="checkbox"> <label class="acd-label areaTitle" for="acd-check7">九州・沖縄地方</label> <ul class="areaList"> <li><a href="#">福岡県</a></li> <li><a href="#">佐賀県</a></li> <li><a href="#">長崎県</a></li> <li><a href="#">熊本県</a></li> <li><a href="#">大分県</a></li> <li><a href="#">鹿児島県</a></li> </ul> </div> </div>
css が下記です
ul.areaList { width: 100%; position: relative; font-size: 100%; list-style: none; /* margin: 0 0 0px 0; */ visibility: hidden; transition: 0.5s; height: auto; opacity: 0; } ul, ol { margin: 1 em 0 1.5 em 1.5 em ; padding-left: 0; } *, ::after, ::before { background-repeat: no-repeat; box-sizing: inherit; } @media (min-width: 768px) .areaTitle { margin-bottom: 20px; font-size: 120%; } .acd-label { display: block; } .areaTitle { position: relative; margin-bottom: 20 px ; font-size: 100%; border-bottom: 2 px solid #172d81; padding-bottom: 5 px ; cursor: pointer;
PC/スマホ 両方ともコンテンツが被さってしまいますね。
回答1件
0
ベストアンサー
メニューが開いたときのコードが提示されていないので、検証ツールから引っ張ってきました。
下記のようにすれば被らないようになります。
css
1ul.areaList { 2 width: 100%; 3 position: relative; 4 font-size: 100%; 5 list-style: none; 6 margin: 0 0 0 0; 7 visibility: hidden; 8 transition: 0.5s; 9 height: 0; /* ここは0 */ 10 opacity: 0; 11} 12 13.acd-check:checked + .acd-label + .areaList { 14 /* height: 120px; ここをautoに修正 */ 15 height: auto; 16 opacity: 1; 17 visibility: visible; 18}
ただし、この方法だと高さがアニメーションしません。height: auto;はアニメーション非対応ですので。
高さをmax-heightで指定するという方法でアニメーションさせることができますが、コンテンツが少ないメニューはアニメーションが速くなるというデメリットがあります。
エリア毎に max-height の設定値を変更するとか、メディアクエリでも変更するとか細かく設定すればある程度は対処できますが面倒ですね。
css
1ul.areaList { 2 width: 100%; 3 position: relative; 4 font-size: 100%; 5 list-style: none; 6 margin: 0 0 0 0; 7 visibility: hidden; 8 transition: 0.5s; 9 max-height: 0; 10 opacity: 0; 11} 12 13.acd-check:checked + .acd-label + .areaList { 14 max-height: 120px; 15 opacity: 1; 16 visibility: visible; 17}
jQueryを使っていいのなら、jQueryの.slideToggle()を使えば簡単にアニメーションで開いたり閉じたりできます。
投稿2021/10/31 05:01
総合スコア34075
あなたの回答
tips
プレビュー
