jQuery toggle menu questions closes automatically

Question

It seems to be double-clicked when the menu is clicked. The menu closes immediately.

Also, how can I close the first clicked menu automatically when I click on another of the three menus?

https://github.com/avant-LeeDahyun/menu01 Please check index.js of my git hub.

Answer 1

Have a look at below code. event.preventDefault() is used to avoid bubbling of events. If we use it then your menu will not close immediately after opening it.

While opening the menu you need to close already opened menus as well as you have to take care of closing the same menu if user click on same opened menu. Added inline comments in JS code below; hope it will be helpful to you.

$(document).ready(function(){
    $(".cp_qa p").hide();
    $(".cp_qa .cp_actab").click(function(){
      
      if($("p",this).is(":visible") == true){
        //we should close this opened menu
        $("p",this).slideToggle("fast"); // close  already opened menu
      }
      else
      {
        $(".cp_qa p").hide(); //hide previously opened other menu if any
        $("p",this).slideToggle("fast"); //open currently pressed menu
      }
      event.preventDefault(); //avoid closing of opened menu
     });
});

.wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: thistle;
    padding: 1rem 0 1rem 0;
  }
  
  .box1 {
    background: green;
    margin: 0 5rem 0 0;
    width: 15em;
  }
  
  .box2 {
    background: gray;
    margin: 0;
    width: 30rem;
  }

  .box1 h1 {
      background-color: tomato;
      margin: 0;
  }

  .box2 h1 {
    background-color: tomato;
    margin: 0;
}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.cp_qa {
    border-top: 1px solid #1b2538;
}
.cp_qa .cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1px;
    color: #1b2538;
}
.cp_qa .cp_actab input {
    position: absolute;
    opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
    font-weight: bold;
    line-height: 1.6;
    position: relative;
    display: block;
    margin: 0 0 0 0;
    padding: 1em 2em 1em 1em;
    cursor: pointer;
    border-bottom: 1px solid #1b2538;
}
.cp_qa .cp_actab label:hover {
    color: #00838F;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
    /* overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.5s ease;
            transition: max-height 0.5s ease; */
    color: #ffffff;
    background: rgba(0, 131, 143, 0.5);
    word-break: keep-all;
}
.cp_qa .cp_actab .cp_actab-content p {
    margin: 1em;
}
/* 質問を開いた時の仕様 */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
    color: #00838F;
}
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
    max-height: 40em;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
    line-height: 1.6;
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 3em;
    margin-top: -12.5px;
    -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
    text-align: center;
}
.cp_qa .cp_actab input[type=checkbox] + label::after {
    content: '◀';
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="wrap">
        <div class="box1">
            <h1>質問１</h1>
        </div>
        
    <div class="box2">
            <div class="cp_qa">
                <div class="cp_actab">
                <input id="cp_tabfour011" type="checkbox" name="tabs">
                <label for="cp_tabfour011">質問テキスト</label>
                    <div class="cp_actab-content">
                    <p>とりもも肉…1枚(約250g)
                        きゅうりの斜め薄切り…4枚
                        トマトのくし形切り…4切れ
                        ねぎしょうがだれ
                        　・万能ねぎの小口切り…大さじ2
                        　・レモン汁、しょうゆ…各大さじ1
                        　・おろししょうが、砂糖…各小さじ1
                        ころも
                        　・溶き卵…1個分
                        　・小麦粉…大さじ3
                        　・水…大さじ1
                        ・塩、粗びき黒こしょう、小麦粉、サラダ油</p>
                    </div>
                </div>
                <div class="cp_actab">
                <input id="cp_tabfour012" type="checkbox" name="tabs">
                <label for="cp_tabfour012">質問テキスト</label>
                    <div class="cp_actab-content">
                    <p>豚バラ薄切り肉…100g
                        ゴーヤー…1本
                        塩昆布…10g
                        ・サラダ油、酒、砂糖、しょうゆ</p>
                    </div>
                </div>
                <div class="cp_actab">
                <input id="cp_tabfour013" type="checkbox" name="tabs">
                <label for="cp_tabfour013">質問テキスト</label>
                    <div class="cp_actab-content">
                    <p>答えテキスト</p>
                    </div>
                </div>
            </div>
    </div>
      </div>