如何在 bootstrap 4 中设置移动菜单的样式和目标

Question

<div class="navbar navbar-expand-lg bg-light navbar-light">
<a href="#" class="navbar-brand">MENU</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse" >
<div class="navbar-nav ml-auto">
<a href="index.html" class="nav-item nav-link active">Hjem</a>
<a href="#about" class="nav-item nav-link">Om</a>
<a href="#services" class="nav-item nav-link">Serviceydelser</a>
<a href="#testimonial" class="nav-item nav-link" hidden>Referencer</a>
<a href="terms.html" class="nav-item nav-link">Handelsbetingelser</a>
<a href="contact.html" class="nav-item nav-link">Kontakt</a>
<div class="nav-item dropdown" hidden>
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Sub Item 1</a>
<a href="#" class="dropdown-item">Sub Item 2</a>
</div>
</div>

有没有一种方法可以在 data-toggle = collapse 处于活动状态时调整移动菜单的样式？我已经定位：

$(".fixed-top a").not(".navbar-brand").not('.collapse.show > a').css("background-color", "green");

但是折叠的部分不起作用。希望你能回答这个问题。

/旅馆

Answer 1

您应该使用下面的 jQuery 在 Body 上切换 Class，您可以根据需要设置导航菜单的样式。使用“menu-open”父级 class 打开导航。

jQuery(".navbar-toggler").click(function(){
        jQuery("body").toggleClass("menu-open");
    });

Answer 2

var orgBgColor = $("a").css("background-color");   
var stickyOffset = $('.navbar').offset().top;

$(window).scroll(function(){
    
var sticky = $('.navbar');    
var scroll = $(window).scrollTop();


if (scroll >= stickyOffset){ 
  sticky.addClass('fixed-top'); // make navbar sticky
$(".fixed-top a").not(".menu-open a").css("background-color", "green");
  $(".navbar-toggler").click(function(){

    $(".navbar").toggleClass("menu-open");
      
      $(".menu-open a").css("background-color", "#ffffff"); 
      
});

}
else {
  $(".fixed-top a").css("background-color", orgBgColor);
  sticky.removeClass('fixed-top');              // remover sticky from navbar.
}
});

如何在 bootstrap 4 中设置移动菜单的样式和目标

How to style and target mobile menu in bootstrap 4

html

jquery

bootstrap-4