javascript - 如何在 jQuery 中创建滚动菜单？

Question

我是 jQuery 新手。请帮我弄清楚为什么我的菜单不起作用。我有两个问题:

1. 在移动版本中，当我点击链接时，我必须滚动到 anchor 并且菜单关闭。但是如果我想移动到另一个部分，我就不能再打开菜单了。我点击切换按钮，但没有任何反应。单击后如何再次打开移动菜单？

2. 我必须在网站的菜单中滚动。此卷轴在 codepen 上有效，但在网站上无效。有相同的代码......为什么滚动在网站上不起作用而在codepen上起作用？

这里是 codepen .这是 website .

请帮我找出问题出在哪里。

$('.burger_active').hide();

$('#burg').on('click', function(){
$('.burger_active').slideToggle();
})

$('.burger_item a').click(function(){
$('.burger_links').slideUp(400);
})

Answer 1

这是汉堡菜单的带有 scss 样式的现成标题...只需添加 Bootstrap ，一切都很完美，我在我的每个元素中都使用此代码，您只需要为您的元素进行一些自定义。

<nav class="navbar navbar-custom-class">
<div class="logo-mobile">
    <a href=""><img src="" alt=""></a>
</div>
<button class="navbar-toggler navbar-toggler-right collapsed burger-button" type="button" data-toggle="collapse" data-target="#header_id">
    <div class="burger-wrapper">
        <span class="burger-span"></span>
        <span class="burger-span"></span>
        <span class="burger-span"></span>
    </div>
</button>
<div class="header-wrapper collapse navbar-collapse" id="header_id">
    <div class="main-container">
        <!-- YOUR HEADER CONTENT HERE -->
    </div>
</div>

它的 SCSS 样式

.navbar-custom-class {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0 !important;
  background-color: #fff;
  z-index: 1020 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  .logo-mobile {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .header-wrapper {
    display: block !important;
  }
  .burger-button {
    display: none !important;
  }
}
@media screen and (max-width: 991px) {
  .navbar-custom-class{
    padding: 0 !important;
    .collapsed{
      .burger-span{
        position: static !important;
        &:nth-child(1){
          transform: rotate(0deg) !important;
          transition: all .2s linear !important;
        }
        &:nth-child(3){
          transform: rotate(0deg) !important;
          transition: all .2s linear !important;
        }
        &:nth-child(2){
          width: 25px !important;
          transition: all .2s linear !important;
          margin: 0 auto 5px !important;
        }
      }
    }
    .burger-button{
      display: block !important;
      padding: 0;
      margin: 0 15px 0 auto;
      border: none;
      height: 50px;
      .burger-wrapper{
        position: relative;
        width: 25px;
        .burger-span{
          position: absolute;
          top: 0;
          height: 3px;
          width: 25px;
          margin-bottom: 5px;
          background-color: #a5a57d;
          display: block;
          &:nth-child(1){
            transform: rotate(135deg);
            transition: all .2s linear;
          }
          &:nth-child(3){
            transform: rotate(-135deg);
            transition: all .2s linear;
          }
          &:nth-child(2){
            width: 0;
            margin: 0 auto 5px;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
      &:focus{
        outline: none;
      }
    }
    .logo-mobile{
      display: block;
      margin-left: 15px;
    }
  }
}

然后用Jquery添加 anchor

jQuery(function($) {
    $("SELECTOR").on("click", function() {
        $('html, body').animate({
            scrollTop: $("SELECTOR").offset().top - 30
        }, 1000);
        return false;
    });
});