水平滾動導航欄不能正常工作

Question

我最近被鏈接到一篇文章解釋如何添加滾動到左側或右側顯示更多選項卡的導航欄。完整的jsfiddle是：

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

顯然我需要在這裏把一些代碼，所以這裏是從小提琴的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) { 
 
     \t $('.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 with DataTables和LESS，而不僅僅是一個基本頁面。

Answer 1

它跳回頁面頂部的原因是因爲您使用的是JQuery單擊事件，並且標籤#是一個錨點標籤，它告訴瀏覽器在單擊頁面時回滾到頁面的頂部。我認爲解決這個問題最簡單的方法就是將右箭頭和左箭頭更改爲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。希望有所幫助。