點擊后div消失

我做了一個手風琴，每次我點擊下面的箭頭時它似乎都會消失是我的代碼請幫助我制作了一個小提琴以便更好地理解

JS小提琴

     $(document).ready(function() {
    $(document).on('click','.picto-accr', function (e) {
            let id_ = $(this).data("arcid");
             $(this).toggleClass('picto-open');
             // $('.table-container').toggleClass('picto-open');

             $("#" id_).slideToggle( "slow" );
             $('.table-container').toggle( "slow" );
         });
     });

 /*tabs*/
    #tabs_container{
        margin-top: -195px;
        width: 50%;
        margin-left: 239px;
    }

    .accr-button{
        border:1px solid  #adadad;
        padding:10px 20px;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 12px;
        color: #2b2b2b;
        letter-spacing: 0.1em;
        font-family: raleway,sans-serif;
        margin-bottom: 0!important;
        cursor: pointer;
        background-color:#e1e1e1;
    }

    .picto-accr{
        width: 20px;
        float: right;
        transform: rotate(90deg);
        margin-top: 1px;
    }
    .picto-open{
        transform:rotate(270deg);
    }
    .table-container{
        padding:50px;
        display:none;
        background-color:#e1e1e1;
        border-top:1px dotted #000;
        margin-top:20px;
        text-transform:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="biodate" class="accr-button">Bio Data<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="biodate" />
      <div class="table-container">

        test 1

      </div>
    </div>
    <div class="accr-button" id="course">Course<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="course" />
      <div class="table-container">
        test 2
      </div>
    </div>

基本上我想要發生的是 div 停止消失，它應該做的就是折疊和展開。

uj5u.com熱心網友回復：

您的問題是 div 也不應該切換，并且您沒有專門指向手風琴內容。

$(document).ready(function() {    
     $(document).on('click','.picto-accr', function (e) {
        let id_ = $(this).data("arcid");
         $(this).toggleClass('picto-open');
         // $('.table-container').toggleClass('picto-open');

         //$("#" id_).slideToggle( "slow" ); <-- comment this line
         $('#' id_  ' .table-container').toggle( "slow" ); <-- make it specific
     });
 });

uj5u.com熱心網友回復：

好吧，通過一些檢查，您可以輕松地發現您實際上正在display: none使用id="biodate"和設定divid="course"

對于 HTML，您可以做的是

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accr-button">Bio Data<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="biodate" />
      <div class="table-container"  id="biodate">

        test 1

      </div>
    </div>
    <div class="accr-button" >Course<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="course" />
      <div class="table-container" id="course">
        test 2
      </div>
    </div>

和 jQuery

$(document).ready(function() {
$(document).on('click','.picto-accr', function (e) {
        let id_ = $(this).data("arcid");
         $(this).toggleClass('picto-open');
         // $('.table-container').toggleClass('picto-open');

         $("#" id_).slideToggle( "slow" );
     });
 });

你的手風琴現在應該可以正常作業了。

標籤：javascript html 查询

上一篇：為什么vue組件屬性不會在第二次打開時更新？

下一篇：事件不會從子元素冒泡到父元素