Bootstrap 5 汉堡动画不起作用

时间：2021-02-17 10:40:37

标签： html css hamburger-menu bootstrap-5

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

问题是：

$(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');
    });
});

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

hamburger menu normal

hamburger menu open

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

答案 2 :(得分：0)

好的我解决了问题:)

问题是：

$(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');
    });
});

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

答案 3 :(得分：0)

下一个问题....

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

相关问题
最新问题