javascript - 如果达到限制，可移动的动态 Bootstrap Tab 菜单 slider

Question

我的网站有动态标签菜单，一个标签菜单项可能是 2 或 3，也可能是 20+。 因此，当导航项超过 10+ 时，会自动下降到第二行，请参阅 here .

我不想要这种效果，我想要在达到导航限制时出现下一个箭头图标，点击它，剩余的菜单项将向左移动。

我试过跟随但没有成功。

HTML

<div class="wrap">
  <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Tab1 example</a></li>
      <li><a href="#">Tab2 example</a></li>
      <li><a href="#">Tab3 example</a></li>
      <li><a href="#">Tab4 example</a></li>
      <li><a href="#">Tab5 example</a></li>
      <li><a href="#">Tab6 example</a></li>
      <li><a href="#">Tab7 example</a></li>
      <li><a href="#">Tab8 example</a></li>
      <li><a href="#">Tab9 example</a></li>
      <li><a href="#">Tab10 example</a></li>
      <li><a href="#">Tab11 example</a></li>
      <li><a href="#">Tab12 example</a></li>
  </ul>
</div>
<button id="goPrev">Prev</button>
<button id="goNext">Next</button>

CSS

.wrap {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width:1000px;
  background: #dad9d9;
    border: 1px solid #efefef;
}

.wrap>.nav-tabs {
  display: inline-block;
  padding:0;
  margin:0;
  position: relative;
  top: 0;
  left: 0;
}

.wrap>.nav-tabs>li {
  background: #fff;
  display: inline-block;
  position: relative;
  white-space: normal;
  float: none;
}
.nav-tabs>li>a {
  margin-right: 0;
}

JavaScript/JQuery

var wrap = $(".wrap").width();
var el = $("ul").width();
if (el > wrap) {
  $("#goNext").click(function() {
    $("ul").stop(true);
    if (-parseInt($("ul").css("left")) - wrap < 0) {
      $("ul").animate({
        "left": "+=-" + wrap
      }, "slow")
    } else {
      $("ul").animate({
        "left": "-" + (el - wrap)
      }, "slow")
    }

  });
  $("#goPrev").click(function() {
    $("ul").stop(true);
    if (-parseInt($("ul").css("left")) - wrap > 0) {
      $("ul").animate({
        "left": "+=" + wrap
      }, "slow")
    } else {
      $("ul").animate({
        "left": "0"
      }, "slow")
    }

  });
}

Bootply

注意:我不想为这个小东西使用任何插件，还要确保 slider 应该是响应式的。

谢谢

Answer 1

只需定义一个全局“currPage”变量。试试这个(参见 jsfiddle):

var menus = $("#menus"), menuWidth = menus.parent().outerWidth();
    var menupage = Math.ceil(menus[0].scrollWidth / menuWidth), currPage = 1;
    if (menupage > 1) {
        $("#goNext").click(function () {
            currPage < menupage && menus.stop(true).animate({
                "left": -menuWidth * currPage
            }, "slow") && currPage++
        });
        $("#goPrev").click(function () {
            currPage > 1 && menus.stop(true).animate({
                "left": -menuWidth * (currPage - 2)
            }, "slow") && currPage--;
        });
        $(window).on("resize", function () {
            menuWidth = menus.parent().outerWidth();
            menupage = Math.ceil(menus[0].scrollWidth / menuWidth);
            currPage = Math.ceil(-parseInt(menus.css("left")) / menuWidth) + 1;
        });
    }

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.tab-slider {
  padding:0 40px;
}
.tab-slider .btn-icon {
    position: absolute;
    top: 5px;
}
#goPrev {
  left:0;
}
#goNext {
  right:0;
}
.wrap {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
  background: #dad9d9;
  border: 1px solid #efefef;
  font-size: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border: 1px solid transparent;
}

.wrap>.nav-tabs {
  display: inline-block;
  padding: 0;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
}

.wrap>.nav-tabs>li {
  background: #fff;
  display: inline-block;
  position: relative;
  white-space: normal;
  float: none;
  font-size: 14px;
}

.nav-tabs>li>a {
  margin-right: 0;
  border-radius: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="tab-slider">
  <div class="wrap">
    <ul class="nav nav-tabs" id="menus">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Tab1 example</a></li>
      <li><a href="#">Tab2 example</a></li>
      <li><a href="#">Tab3 example</a></li>
      <li><a href="#">Tab4 example</a></li>
      <li><a href="#">Tab5 example</a></li>
      <li><a href="#">Tab6 example</a></li>
      <li><a href="#">Tab7 example</a></li>
      <li><a href="#">Tab8 example</a></li>
      <li><a href="#">Tab9 example</a></li>
      <li><a href="#">Tab10 example</a></li>
      <li><a href="#">Tab11 example</a></li>
      <li><a href="#">Tab13 example</a></li>
      <li><a href="#">Tab14 example</a></li>
      <li><a href="#">Tab15 example</a></li>
      <li><a href="#">Tab16 example</a></li>
      <li><a href="#">Tab17 example</a></li>
    </ul>

  </div>
  <button id="goPrev" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-left"></i></button>
  <button id="goNext" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>

注意:我加了一个id menus给你的<ul class="nav nav-tabs">