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

Question

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

http://jsfiddle.net/k63t7tqo/3/

显然我需要在这里放一些代码，所以这是来自 fiddle 的 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 我很可能自己弄清楚，但我终究无法弄清楚为什么导航栏会上下移动，而不是原地向右和向左滚动。在此先感谢您的帮助。这个网站很棒，你们也很棒。

编辑:我想值得注意的是，我将 Bootstrap 与 DataTables 和 LESS 一起使用，而不仅仅是一个基本页面。

Answer 1

它跳回页面顶部的原因是因为您正在使用 JQuery click 事件并且主题标签 # 是一个 anchor 标记，它告诉浏览器滚动回页面顶部单击时的页面。我认为解决此问题的最简单方法是将左右箭头更改为 span 标记，这样当用户浏览您的页面时， anchor 链接将不会被调用，您的页面也不会跳来跳去。

    <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 .希望对您有所帮助。