soraatori score 12
2019/07/21 20:03 投稿
| アコーディオンメニューで一個開けると他は閉じるようにしたい |
| ### 前提・実現したいこと |
| WordPressで検索サイトを構築しています。 |
| 検索部分のアコーディオンメニューで一個開けると他は閉じるようにしたいのですが、 |
| 他を開けても閉じずに開いたままになってしまいます。 |
| ご指導のほどよろしくお願いします。 |
| ### 該当のソースコード |
| ```html |
| <div class="accordionbox" id="accordion"> |
| <ul class="accordion"> |
| <li class="accordionlist"> |
| <div class="clearfix"> |
| <div class="accordionlist-title"> |
| <p>カテゴリで探す</p> |
| </div> |
| <p class="accordion_icon"><span></span><span></span><span></span></p> |
| </div> |
| <ul class="accordionlist-item"> |
| <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> |
| <li><a href="">測量機、測定器</a></li> |
| <li><a href="">水タンク・ノッチタンク</a></li> |
| <li><a href="">基礎工事用機械</a></li> |
| <li><a href="">除雪機・タイヤショベル</a></li> |
| </ul> |
| </li> |
| <li class="accordionlist"> |
| <div class="clearfix"> |
| <div class="accordionlist-title"> |
| <p>名前で探す（あいうえお）</p> |
| </div> |
| <p class="accordion_icon"><span></span><span></span><span></span></p> |
| </div> |
| <ul class="accordionlist-item" style="height: auto;"> |
| <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> |
| </li> |
| </ul> |
| </div> |
| ``` |
| ```css |
| .accordionlist { |
| padding: 15px 20px; |
| border-bottom: 1px solid #FFF; |
| } |
| li.accordionlist { |
| display: block; |
| font-size: 13px; |
| font-size: 0.8125rem; |
| } |
| .accordionlist-item li:first-child { |
| display: none !important; |
| } |
| .accordionlist div .accordionlist-title { |
| float: left; |
| margin-bottom: 0; |
| } |
| .accordionlist div .accordionlist-title p { |
| margin-bottom: 0; |
| } |
| .accordionlist ul { |
| display: none; |
| } |
| .accordionlist-item li { |
| display: inline-block; |
| background-color: #FFF; |
| padding: 6px; |
| border-radius: 2px; |
| margin: 10px 5px 5px 0; |
| } |
| .accordionlist- |
| .accordionlist-item a { |
| color: #3840C3; |
| font-size: 14px; |
| font-size: 0.875rem; |
| font-weight: 700; |
| } |
| .accordionlist-item { |
| display: -webkit-flex; |
| display: flex; |
| -webkit-flex-wrap: wrap; |
| flex-wrap: wrap; |
| -webkit-align-items: flex-start; |
| align-items: flex-start; |
| overflow-y: scroll; |
| margin-top: 10px; |
| height: 155px; |
| } |
| .accordion_icon, |
| .accordion_icon span { |
| display: inline-block; |
| transition: all .4s; |
| box-sizing: border-box; |
| } |
| .accordion_icon { |
| position: relative; |
| width: 30px; |
| float: right; |
| } |
| .accordion_icon span { |
| position: absolute; |
| right: 0; |
| width: 35%; |
| height: 2px; |
| background-color: #FFF; |
| border-radius: 4px; |
| } |
| .accordion_icon span:nth-of-type(1) { |
| top: 1.5px; |
| right: -4.4px; |
| border: 2px solid #FFF; |
| background-color: unset; |
| height: 19px; |
| width: 19px; |
| border-radius: 100px; |
| } |
| .accordion_icon span:nth-of-type(2) { |
| top: 10px; |
| -webkit-transform: rotate(0deg); |
| transform: rotate(0deg); |
| } |
| .accordion_icon span:nth-of-type(3) { |
| top: 10px; |
| -webkit-transform: rotate(90deg); |
| transform: rotate(90deg); |
| } |
| .accordion_icon.active span:nth-of-type(2) { |
| display: none; |
| } |
| .accordion_icon.active span:nth-of-type(3) { |
| top: 10px; |
| -webkit-transform: rotate(180deg); |
| transform: rotate(180deg); |
| } |
| ``` |
| ```jQuery |
| $(function () { |
| $(".accordionbox div").on("click", function () { |
| $(this).next().slideToggle(); |
| if ($(this).children(".accordion_icon").hasClass('active')) { |
| $(this).children(".accordion_icon").removeClass('active'); |
| } else { |
| $(this).children(".accordion_icon").addClass('active'); |
| } |
| }); |
| }); |
| $(function () { |
| $('.accordion p.accordion_icon').click(function () { |
| $(this).next('.accordion .accordionlist-item').slideToggle(); |
| $('.accordion p.accordion_icon').not($(this)).next('.accordion .accordionlist-item').slideUp(); |
| }); |
| }); |
| ``` |
| ### 試したこと |
| dt-ddからul-liul-liへ再構築しソースコードを見直しましたが、まだ何かが足らないようです。 |
