jquery - jQuery 切换菜单问题自动关闭

看看下面的代码。event.preventDefault()用于避免事件冒泡。如果我们使用它，那么您的菜单在打开后不会立即关闭。

打开菜单时，您需要关闭已经打开的菜单，并且如果用户单击相同的打开菜单，则必须注意关闭相同的菜单。在下面的 JS 代码中添加了内联注释；希望对您有所帮助。

$(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>質問１&lt;/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
                        ・塩、粗びき黒こしょう、小麦粉、サラダ油&lt;/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
                        ・サラダ油、酒、砂糖、しょうゆ&lt;/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>

jquery - jQuery 切换菜单问题自动关闭

问题描述

解决方案

推荐阅读