Question

我最近链接到一篇帖子，解释了如何添加向右或向左滚动的导航栏以显示更多标签。完整的JSFiddle是：

显然我需要在这里放一些代码，所以这里是来自小提琴的HTML：

$('.direction-right').click(function() {
    var margin = $('.navbar-nav').css('margin-top');
    console.log(margin);
    console.log('-' + ($('.navbar-nav').height() - 50) + 'px');
    $('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px');
});

$('.direction-left').click(function() {
    var margin = $('.navbar-nav').css('margin-top');
    $('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px');
});

$(window).resize(function() {
    if ($(window).width() < 768) {
     	$('.navbar-nav').css('margin-top', 0);  
    }
});

@media (max-width: 768px) {
    .direction-right, .direction-left {
        display: none;
    }    
}
@media (min-width: 768px) {
    .navbar {
        height: 51px;
        overflow: hidden;
    }
    .navbar-nav {
        overflow: hidden;
        width: calc(100% - 52px);
    }
    
    .direction-right, .direction-left {
        display: block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          
        <div class="navbar-header pull-left">     
        </div>
        <div class="navbar-header pull-right">
           <button type="button" class="navbar-toggle" 
                  data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
          
        <div class="navbar-collapse collapse">
            <a href="#" class="direction-left pull-left navbar-brand"><</a>
            <ul class="nav navbar-nav">
            <li><a href="1.html">Menu 1</a></li>
            <li><a href="2.html">Menu 2</a></li>
            <li><a href="3.html">Menu 3</a></li>
            <li><a href="4.html">Menu 4</a></li>
            <li><a href="5.html">Menu 5</a></li>
            <li><a href="6.html">Menu 6</a></li>
            <li><a href="7.html">Menu 7</a></li>
            <li><a href="8.html">Menu 8</a></li>
            <li><a href="9.html">Menu 9</a></li>
            <li><a href="10.html">Menu 10</a></li>
            <li><a href="11.html">Menu 11</a></li>
            <li><a href="12.html">Menu 12</a></li>
          </ul>
            <a href="#" class="direction-right pull-left navbar-brand">></a>
        </div>
    </div>
  </div>

我遇到的问题是：

A）当我点击左右箭头时，导航栏本身会向上和向下移动页面，甚至会重叠其他单词/内容。

B）导航栏与我正在进行的基本蓝色Bootstrap主题不匹配。

问题B我很可能弄清楚自己，但我不能为我的生活弄清楚为什么导航栏上下移动而不是向左和向右滚动。在此先感谢您的任何帮助。这个网站很棒，你的人很棒。

编辑：我想值得注意的是我正在使用带有DataTables和LESS的Bootstrap，而不仅仅是一个基本页面。

Answer 1

它跳回到页面顶部的原因是因为您正在使用JQuery点击事件，而#Hop #是一个锚标记，它告诉浏览器滚动回页面顶部点击。我认为解决此问题的最简单方法是将左右箭头更改为span标记，这样就不会调用锚链接，并且当用户导航页面时，您的页面不会跳转。

    <span class="direction-left pull-left navbar-brand"><</span>
    <ul class="nav navbar-nav">
        <li><a href="1.html">Menu 1</a></li>
        <li><a href="2.html">Menu 2</a></li>
        <li><a href="3.html">Menu 3</a></li>
        <li><a href="4.html">Menu 4</a></li>
        <li><a href="5.html">Menu 5</a></li>
        <li><a href="6.html">Menu 6</a></li>
        <li><a href="7.html">Menu 7</a></li>
        <li><a href="8.html">Menu 8</a></li>
        <li><a href="9.html">Menu 9</a></li>
        <li><a href="10.html">Menu 10</a></li>
        <li><a href="11.html">Menu 11</a></li>
        <li><a href="12.html">Menu 12</a></li>
    </ul>
    <span class="direction-right pull-left navbar-brand">></span>

这是你的JS.Fiddle updated with the new code。希望有所帮助。

水平滚动导航栏无法正常工作

1 个答案: