为什么单击按钮时脚本不起作用？

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 事件处理程序，从而引发此错误，因为它找不到正确设置的选项卡。