Bootstrap 5 汉堡动画不工作

Question

已解决
好的，我解决了问题:)

问题是：

$(function () {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open'); //Chrome expert mode says $ is not a function
    });
});

所以我解决了这个问题：

jQuery(document).ready(function ($) {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open');
    });
});

我希望它对你们中的另一个人也有帮助:) 感谢您尝试提供帮助。

问题是：

我需要一些动画方面的帮助。我正在使用 Bootstrap 5，我想创建一个汉堡菜单动画。

以下代码片段来自我的网页，但动画不起作用。代码片段来自：https://mdbootstrap.com/snippets/jquery/mdbootstrap/911054#html-tab-view

HTML 代码：

<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container-fluid container-fluid-mobile">
<jdoc:include type="modules" name="logo"/>
    
<button class="navbar-toggler navbar-toggler-button" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-hamburger"><span></span><span></span><span></span></div>
</button>

<div class="collapse navbar-collapse" id="navigation">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0 navbar-right nav-item">
<jdoc:include type="modules" name="navigation" onclick="toggleMenu() />
</ul>
<div class="collapse-show-bottom"></div>

</div>
</div>
</nav>

CSS代码：

.animated-hamburger {
    width: 30px !important;
    height: 20px !important;
    position: relative !important;
    margin: 0px !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .5s ease-in-out !important;
    -moz-transition: .5s ease-in-out !important;
    -o-transition: .5s ease-in-out !important;
    transition: .5s ease-in-out !important;
    cursor: pointer !important;
}
    
.animated-hamburger span {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    left: 0 !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .25s ease-in-out !important;
    -moz-transition: .25s ease-in-out !important;
    -o-transition: .25s ease-in-out !important;
    transition: .25s ease-in-out !important;
}
    
.animated-hamburger span {
    background: #f3e5f5 !important;
}
    
.animated-hamburger span:nth-child(1) {
    top: 0px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(2) {
    top: 10px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(3) {
    top: 20px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg) !important;
    -moz-transform: rotate(45deg) !important;
    -o-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    top: 0px !important;
    left: 8px !important;
}
    
.animated-hamburger.open span:nth-child(2) {
    width: 0% !important;
    opacity: 0 !important;
}
    
.animated-hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
    top: 21px !important;
    left: 8px !important;
}

JavaScript代码：

$(function () {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open');
    });
});

Answer 1

hamburger menu normal

hamburger menu open

当你点击它时，汉堡菜单应该变成一个x。

Answer 2

只需添加 JQuery 库即可让脚本运行，

已编辑：添加了单击外部后关闭菜单的事件。

这里有一个例子；

$(document).ready(function() {
    $('.navbar-toggler-button').on('click', function() {
      $('.animated-hamburger').toggleClass('open');
    });
    
    $(document).click(function(event) {
      var tover = $(event.target);
    if ($('.animated-hamburger').hasClass('open') && !tover.hasClass('animated-hamburger')) {
    $('.animated-hamburger').toggleClass('open');
    }
    });

});

.animated-hamburger {
    width: 30px !important;
    height: 20px !important;
    position: relative !important;
    margin: 0px !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .5s ease-in-out !important;
    -moz-transition: .5s ease-in-out !important;
    -o-transition: .5s ease-in-out !important;
    transition: .5s ease-in-out !important;
    cursor: pointer !important;
}
    
.animated-hamburger span {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    left: 0 !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .25s ease-in-out !important;
    -moz-transition: .25s ease-in-out !important;
    -o-transition: .25s ease-in-out !important;
    transition: .25s ease-in-out !important;
}
    
.animated-hamburger span {
    background: #f3e5f5 !important;
}
    
.animated-hamburger span:nth-child(1) {
    top: 0px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(2) {
    top: 10px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(3) {
    top: 20px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg) !important;
    -moz-transform: rotate(45deg) !important;
    -o-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    top: 0px !important;
    left: 8px !important;
}
    
.animated-hamburger.open span:nth-child(2) {
    width: 0% !important;
    opacity: 0 !important;
}
    
.animated-hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
    top: 21px !important;
    left: 8px !important;
}

<!-- JUST ADD THIS LINE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ENDS HERE -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container-fluid container-fluid-mobile">
<jdoc:include type="modules" name="logo"/>
    
<button class="navbar-toggler navbar-toggler-button" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-hamburger"><span></span><span></span><span></span></div>
</button>

<div class="collapse navbar-collapse" id="navigation">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0 navbar-right nav-item">
<jdoc:include type="modules" name="navigation" onclick="toggleMenu() />
</ul>
<div class="collapse-show-bottom"></div>

</div>
</div>
</nav>

Answer 3

好的我解决了问题:)

问题是：

$(function () {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open'); //Chrome expert mode says $ is not a function
    });
});

所以我解决了这个问题：

jQuery(document).ready(function ($) {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open');
    });
});

我希望它对你们中的另一个人也有帮助:) 感谢您的帮助。

Answer 4

下一题....

当我点击汉堡包菜单中的 link 时，“x”仍保留在那里。如果我用鼠标点击或用智能手机触摸网站的另一点，它就会返回。

Bootstrap 5 汉堡动画不工作

Bootstrap 5 Hamburger Animation not working

html

css

hamburger-menu

bootstrap-5