質問編集履歴

1 誤字

soraatori

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-txet a {
.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へ再構築しソースコードを見直しましたが、まだ何かが足らないようです。
  • jQuery

    9991 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る