Bootstrap下拉按钮失效求助：原正常功能现无法折叠展开

你现在的问题是Bootstrap原生下拉组件的触发逻辑和Vue的自定义点击事件冲突了——你已经用Vue的v-on:click和v-if控制下拉内容的显示/隐藏，但按钮上还保留了Bootstrap原生下拉的data-toggle="dropdown"属性，两套逻辑互相干扰，导致下拉无法正常工作，升级Bootstrap后这种冲突会更明显。

修复步骤： #

1. 移除Bootstrap原生下拉的冲突属性 #

既然用Vue控制显示逻辑，就不需要Bootstrap的原生触发属性了，修改代码如下：

<p>
  <button 
    v-on:click="contacts = !contacts" 
    type="button" 
    class="btn btn-secondary dropdown-toggle" 
    :aria-expanded="contacts" 
    v-scroll-to="'#con'"
  >
    Infos contact 
  </button>
</p>
<div class="contacts text-left" v-if="contacts" id="con">
  <p><i class="fa fa-map-marker"></i> 14, rue xxx, 92270 Bois Colombes</p>
  <p><i class="fa fa-linkedin"></i><a href="http://www.linkedin.com/in/xxx"> www.linkedin.com/in/xxx</a></p>
  <p><i class="fa fa-envelope"></i><a href="mailto:xxx.xxx@yahoo.fr"> xx.xx@yahoo.fr</a></p>
  <p><i class="fa fa-phone"></i> 06 xx xx xx xx</p>
</div>

• 删掉data-toggle="dropdown"和aria-haspopup="true"（你的下拉内容不是Bootstrap标准.dropdown-menu结构，这两个属性意义不大）
• 将aria-expanded改为绑定Vue变量:aria-expanded="contacts"，符合无障碍规范

2. 检查版本兼容性 #

如果是升级Bootstrap后出现的问题：

• 若使用bootstrap-vue这类集成库，要确保其版本与Bootstrap匹配（比如Bootstrap 5对应bootstrap-vue-next，Bootstrap 4对应旧版bootstrap-vue）
• 若直接引入Bootstrap，Bootstrap 5已不再依赖jQuery，请勿残留旧的jQuery初始化逻辑

3. 验证样式一致性 #

如果需要保留Bootstrap下拉的样式效果，确保.contacts类与Bootstrap下拉菜单样式兼容，或直接改用Bootstrap标准下拉结构，结合Vue的v-show/v-if控制，避免混用两套触发逻辑。

内容的提问来源于stack exchange，提问作者moh ahmed