前提・実現したいこと
WordPressで検索サイトを構築しています。
検索部分のアコーディオンメニューで一個開けると他は閉じるようにしたいのですが、
他を開けても閉じずに開いたままになってしまいます。
ご指導のほどよろしくお願いします。
該当のソースコード
php
1<div class="search-area"> 2 <div class="catalogsearch-top"> 3 <figure><img src="<?php echo esc_url(get_template_directory_uri());?>/img/icon_search.svg" width="24" height="24" alt=""></figure> 4 <h3>商品検索はこちら<br><span>ITEM SEARCH</span></h3> 5 </div> 6 <?php get_search_form(); ?> 7 <div class="refine-top"> 8 <div class="accordionbox" id="accordion"> 9 <dl class="accordionlist"> 10 <dt class="clearfix"> 11 <div class="accordionlist-title"> 12 <p>カテゴリで探す</p> 13 </div> 14 <p class="accordion_icon"><span></span><span></span><span></span></p> 15 </dt> 16 <dd> 17 <div class="accordionlist-item"> 18 <ul> 19 <?php wp_list_categories('orderby=ID&hide_empty=0&order=ASC&title_li='); ?> 20 </ul> 21 </div> 22 </dd> 23 </dl> 24 25 <dl class="accordionlist"> 26 <dt class="clearfix"> 27 <div class="accordionlist-title"> 28 <p>名前で探す(あいうえお)</p> 29 </div> 30 <p class="accordion_icon"><span></span><span></span><span></span></p> 31 </dt> 32 <dd> 33 <div class="accordionlist-item accordionlist-item2"> 34 <?php 35 $tags = get_tags( $post->ID ); 36 $separator = ''; 37 $output = ''; 38 if($tags){ 39 foreach($tags as $tag) { 40 if(preg_match('/word_/',$tag->slug)){ // 表示するタグ(この場合はスラッグ) 41 $output .= '<li><a href="'.get_tag_link( $tag->term_id ).'">'.$tag->name.'</a></li>'.$separator; 42 } 43 } 44 echo trim($output,$separator); 45 } 46 ?> 47 </div> 48 </dd> 49 </dl> 50 </div> 51 </div> 52</div>
css
1.accordionlist { 2 padding: 15px 20px; 3 border-bottom: 1px solid #FFF; 4} 5 6.accordionlist dt { 7 display: block; 8 font-size: 13px; 9 font-size: 0.8125rem; 10} 11 12.accordionlist dt:first-child { 13 border-top: none !important; 14} 15 16.accordionlist dt .accordionlist-title { 17 float: left; 18 margin-bottom: 0; 19} 20 21.accordionlist dt .accordionlist-title p { 22 margin-bottom: 0; 23} 24 25.accordionlist dd { 26 display: none; 27} 28 29.accordionlist-txet a { 30 display: inline-block; 31 background-color: #FFF; 32 padding: 6px; 33 border-radius: 2px; 34 margin: 10px 5px 5px 0; 35} 36 37.accordionlist-txet a { 38 color: #3840C3; 39 font-size: 14px; 40 font-size: 0.875rem; 41 font-weight: 700; 42} 43 44.accordionlist-item { 45 display: -webkit-flex; 46 display: flex; 47 -webkit-flex-wrap: wrap; 48 flex-wrap: wrap; 49 -webkit-align-items: flex-start; 50 align-items: flex-start; 51 overflow-y: scroll; 52 margin-top: 10px; 53 height: 155px; 54} 55 56.accordionlist-item2 { 57 display: -webkit-flex; 58 display: flex; 59 -webkit-flex-wrap: wrap; 60 flex-wrap: wrap; 61 -webkit-align-items: flex-start; 62 align-items: flex-start; 63 margin-top: 10px; 64} 65 66.accordion_icon, 67.accordion_icon span { 68 display: inline-block; 69 transition: all .4s; 70 box-sizing: border-box; 71} 72 73.accordion_icon { 74 position: relative; 75 width: 30px; 76 float: right; 77} 78 79.accordion_icon span { 80 position: absolute; 81 right: 0; 82 width: 35%; 83 height: 2px; 84 background-color: #FFF; 85 border-radius: 4px; 86} 87 88.accordion_icon span:nth-of-type(1) { 89 top: 1.5px; 90 right: -4.4px; 91 border: 2px solid #FFF; 92 background-color: unset; 93 height: 19px; 94 width: 19px; 95 border-radius: 100px; 96} 97 98.accordion_icon span:nth-of-type(2) { 99 top: 10px; 100 -webkit-transform: rotate(0deg); 101 transform: rotate(0deg); 102} 103 104.accordion_icon span:nth-of-type(3) { 105 top: 10px; 106 -webkit-transform: rotate(90deg); 107 transform: rotate(90deg); 108} 109 110.accordion_icon.active span:nth-of-type(2) { 111 display: none; 112} 113 114.accordion_icon.active span:nth-of-type(3) { 115 top: 10px; 116 -webkit-transform: rotate(180deg); 117 transform: rotate(180deg); 118}
jQuery
1$(function () { 2 $(".accordionbox dt").on("click", function () { 3 $(this).next().slideToggle(); 4 if ($(this).children(".accordion_icon").hasClass('active')) { 5 $(this).children(".accordion_icon").removeClass('active'); 6 } else { 7 $(this).children(".accordion_icon").addClass('active'); 8 } 9 }); 10});
試したこと
この動作を実行させるために以下のコードを追記しました。
jQuery
1$(function () { 2 $('.accordionbox dt').click(function () { 3 $(this).next('.accordionbox .accordionlist-item').slideToggle(); 4 $('.accordionbox dt').not($(this)).next('.accordionbox .accordionlist-item').slideUp(); 5 }); 6});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/21 07:02