Bootstrap 5汉堡动画不起作用答案

【问题标题】：Bootstrap 5 Hamburger Animation not workingBootstrap 5汉堡动画不起作用
【发布时间】：2021-02-17 10:40:37
【问题描述】：

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

问题是：

$(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，我想创建一个汉堡菜单动画。

以下代码 sn-ps 来自我的网页，但动画不起作用。代码 sn-ps 来源于：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');
    });
});

【问题讨论】：

不是javascript吗？
你是什么意思？
$(function () { $('.navbar-toggler-button').on('click', function () { $('.animated-hamburger').toggleClass('open'); }); }); 看起来更像 JavaScript 而不是 Java
是的，对不起，我已经编辑了我的文字。这段代码在我的 main.js 中
@BudaÖrs 是的，它是 JQuery

标签： html css hamburger-menu bootstrap-5

【解决方案1】：

只需添加 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>

【讨论】：

我不明白为什么截断的代码对你有用，而对我绝对不行。是因为我在 joomla 的 php 网站中使用此代码吗？
@dan3er 打开控制台日志检查错误？
我已经解决了这个问题，但现在是下一个问题：当我点击汉堡菜单中的链接时，“x”仍然存在。如果我用鼠标单击或在智能手机上触摸网站的另一点，它会返回。
@dan3er 你必须设置一个语句来在菜单外部点击或使用它的内容时隐藏菜单
我尝试了兄弟姐妹，但它不起作用。 ``` jQuery(document).ready(function ($) { $('.navbar-toggler-button').on('click', function () { $('.animated-hamburger').addClass(' open').siblings().removeClass('open'); }); }); ```

【解决方案2】：

hamburger menu normal

hamburger menu open

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

【讨论】：

这都是你的问题吗？
你应该使用 Jquery 库来实现你的目标。

【解决方案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');
    });
});

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

【讨论】：

【解决方案4】：

下一个问题....

当我点击汉堡菜单中的链接时，“x”仍然存在。如果我用鼠标单击或在智能手机上触摸网站的另一点，它会返回。

【讨论】：