当前位置: 代码迷 >> JavaScript >> Bootstrap 3 / JS:导航栏折叠和自动滚动冲突
  详细解决方案

Bootstrap 3 / JS:导航栏折叠和自动滚动冲突

热度:21   发布时间:2023-06-05 15:58:23.0

我在导航栏的“联系人”链接中添加了“折叠”以隐藏菜单:

<li><div class="inactive"><a href="#contact" data-toggle="collapse" data-target=".navbar-right2">Contact</a></div></li>

它工作正常,但是在添加自动滚动时停止工作。 因此,自动滚动有效,但折叠无效。 这是自动滚动:

    $(function() {
      $('a[href*=#]:not([href=#]):not(.carousel-control)').click(function () { 
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
       $('body').scrollspy({ target: '#' });
      });
    });

汉堡包按钮具有以下代码:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-right2">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
</button>

因此,我需要自动滚动和收合同时工作。

任何帮助将不胜感激。

我确实在自动滚动中添加了一行:

$(function() {
      $('a[href*=#]:not([href=#]):not(.carousel-control)').click(function () { 

        $('.navbar-right2').collapse('toggle'); // <-- SOLUTION
        ...

谢谢