jQuery 和 Bootstrap 冲突答案

【问题标题】：jQuery & Bootstrap ClashjQuery 和 Bootstrap 冲突
【发布时间】：2021-03-06 11:16:56
【问题描述】：

我的 jQuery 代码根据点击隐藏/显示不同的 div：

$(function () {

$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();

$("a").bind("click", function () {
   $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
   var target = $(this).data("target");
   $("."+target+"-div").show();
});

});

我的导航栏代码虽然很乱：

<nav class="navbar navbar-expand-lg navbar navbar-styling pl-5 sticky">
  <a class="navbar-brand" href="#"><img src="../images/no-text-logo.jpg" alt="Gentry Barbershop Logo" class="header-logo"></img></a>
  <button class="navbar-toggler pr-5" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon burger-menu-styling">
      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-filter custom-burger" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
      </svg>
    </span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Meet The Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Book An Appointment</a>
      </li>
    </ul>
  </div>
</nav>

当我单击任何导航栏链接时，即使它们设置为“#”，它也会将 div 隐藏在 jQuery 链接到的页面下方。所有 jQuery 链接都按预期工作，除非单击任何顶部导航栏链接时它们会隐藏 - 所以我只能假设这是引导程序的问题/冲突？

【问题讨论】：

jQuery bind 已被弃用多年，你不应该再使用它了。

标签： javascript html jquery css bootstrap-4

【解决方案1】：

$("a").bind("click", function () {....

点击事件绑定在HTML代码中的所有<a>标签上，所以当你点击同样带有<a>标签的导航链接时，点击事件将被触发，该函数隐藏其他div。

所以当你点击它或给它们一个类名时，正确地定位元素以隐藏 div。

$(`{{#parentElement}} a`).click(function(){
   $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
   var target = $(this).data("target");
   $("."+target+"-div").show();
})

【讨论】：