时间戳

首页 > 解决方案 > 使用 jQuery 在单击时将侧栏引导文本颜色从 text-light 更改为 text-dark

html - 使用 jQuery 在单击时将侧栏引导文本颜色从 text-light 更改为 text-dark

问题描述

帮助添加 jQuery，当侧边菜单打开或单击导航栏切换按钮时，它将删除文本灯。

window.onload = function() {
  if (window.jQuery) {
    $(document).ready(function() {
      $(".sidebarNavigation .navbar-collapse").hide().clone().appendTo("body").removeAttr("class").addClass("sideMenu").show();
      $("body").append("<div class='overlay'></div>");
      $(".navbar-toggle, .navbar-toggler").on("click", function() {
        $(".sideMenu").addClass($(".sidebarNavigation").attr("data-sidebarClass"));
        $(".sideMenu, .overlay").toggleClass("open");
        $(".overlay").on("click", function() {
          $(this).removeClass("open");
          $(".sideMenu").removeClass("open")
        })
      });
      $("body").on("click", ".sideMenu.open .nav-item", function() {
        if (!$(this).hasClass("dropdown")) {
          $(".sideMenu, .overlay").toggleClass("open")
        }
      });
      $(window).resize(function() {
        if ($(".navbar-toggler").is(":hidden")) {
          $(".sideMenu, .overlay").hide()
        } else {
          $(".sideMenu, .overlay").show()
        }
      })
    })
  } else {
    console.log("sidebarNavigation Requires jQuery")
  }
}
<nav class="navbar navbar-expand-md bg-body navbar-dark sidebarNavigation" data-sidebarClass="navbar-dark bg-light ">
  <a class="navbar-brand" href="index.html"><img src="Media/David-Sanders-Logo-Transparent-White-Writing.png" width="210wh" class="img-fluid" alt="Responsive logo"></a>
  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse">
  <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-center sidenav">

    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="text-danger btn">Home</a></li>
      <li class="nav-item"><a href="#" class="text-light btn">Portfolio</a></li>
      <li class="nav-item"><a href="#" class="text-light btn">About</a></li>
      <li class="nav-item"><a href="#" class="text-light btn">Services</a></li>
      <li class="nav-item"><a href="#" class="text-light btn">Skills</a></li>
      <li class="nav-item"><a href="#" class="text-light btn">Contact</a></li>
    </ul>
  </div>

</nav>

如果这可以在当前的 jQuery 代码中实现，那将会很有帮助。

标签： htmljquerycssbootstrap-4

解决方案

我首先从所有列表项中删除了 text-light 类。

<li class="nav-item"><a href="#" class="btn">Contact</a></li>

然后我能够通过访问 css 中的导航并覆盖引导程序来实现所需的结果。

nav .navbar-nav li a{
  color: white;
}

问题已解决，但不是在我想要的 jQuery 中，但是，无论哪种方式都可以达到相同的结果。

推荐阅读