為什么單擊按鈕時腳本不起作用？

Question

我有一個按鈕，當用戶點擊它時，電話號碼會慢慢出現。

這是 HTML 代碼：

<span id="show-phone-numbers" href="#tab4" data-bs-toggle="tab" class="btn btn-success">
   <i class="fe fe-phone-call"></i> Show Phone Number
</span> 

<div class="media margin-top-20" id="phone-number-section" style="display:none">
    <div class="media-body text-center">

         <a href="tel:00000000">
             <p class="btn btn-outline-primary">
                  <i class="fe fe-phone-call"></i>    somephonenumber
             </p>
         </a>
                                                    

         <a href="tel:00000000">
             <p class="btn btn-outline-primary">
                  <i class="fe fe-phone-call"></i>    somephonenumber
             </p>
         </a>
                                                
     </div>
</div>

這是腳本：

$("#show-phone-numbers").on("click",function(){
    $("#phone-number-section").toggle("slow");
});

問題是當我單擊“顯示電話號碼”按鈕時，我在控制台中收到此錯誤：

在此處輸入圖像描述

並且(bootstrap-rtl.js:1031:35)是下面的代碼：

children(element, selector) {
  return [].concat(...element.children).filter(child => child.matches(selector));
},

我確實搜索了該錯誤，但找不到幫助我處理此錯誤的方法。

Answer 1

為什么你有data-bs-toggle="tab"在那里，沒有任何引導選項卡元素？ 這會導致注冊 BS 事件處理程序，從而引發此錯誤，因為它找不到正確設置的選項卡。