如何将菜单滚动到菜单中的当前项目？

Question

我有包含11个元素的菜单。显示3个。有像滑块这样的按钮，可以帮助滚动这个菜单。在我的网站上，当它的页面的href == url（突出显示当前元素）时，我给元素提供了特殊的类。我需要在窗口加载时将此当前元素移动到菜单的第一个左侧位置，因此当页面加载时，必须滚动菜单列表，并且当前元素保持在第一个左侧位置而不管列表中的位置。 这就是我的代码：

＆＃13;

＆＃13;

<p><a href="http://demo.localhost:3000/users/confirmation?confirmation_token=D1Eyxrst5rK3q5fJYXSg">Confirm my account</a></p>

＆＃13;

function slideR() {
  $('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
    "left": "-=300px"
  }, 200);
}

function slideL() {
  $('#menu > ul > li').last().animate({
    "left": "+=300px"
  }, 200, function() {
    $(this).prependTo('#menu > ul').css('left', '0px');
  });
}

$('.arrow-right').click(function() {
  slideR();
});
$('.arrow-left').click(function() {
  slideL();
});

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}
nav {
  position: relative;
  max-width: 300px;
  margin: 25px auto;
}
nav > ul {
  height: 50px;
  text-align: center;
  max-width: 300px;
  overflow: hidden;
  border: 2px solid #ccc;
  font-size: 0;
}
nav > ul > li {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}
nav > ul > li a {
  color: #000;
  display: block;
  text-decoration: none;
  line-height: 50px;
  padding: 0 15px;
  transition: 0.25s;
}
nav > ul > li a:hover {
  background: #000;
  color: #fff;
}
.arrows > .arrow {
  position: absolute;
  top: 50%;
  border: 2px solid #f00;
  z-index: 99;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  cursor: pointer;
  display: block;
}
.arrow-right {
  right: 0;
}
.arrow-left {
  left: 0;
}
.active a {
  color: #029A55;
}

＆＃13;

＆＃13;

＆＃13;

请帮我补充我的代码来解决问题。 我试试这个

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
    <li><a href="#">Menu 5</a>
    </li>
    <li><a href="#">Menu 6</a>
    </li>
    <li><a href="#">Menu 7</a>
    </li>
    <li><a href="#">Menu 8</a>
    </li>
    <li class="active"><a href="#">Menu 9</a>
    </li>
    <li><a href="#">Menu 10</a>
    </li>
    <li><a href="#">Menu 11</a>
    </li>
  </ul>
  <div class="arrows">
    <span class="arrow arrow-right"></span>
    <span class="arrow arrow-left"></span>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

但没有任何反应。

Answer 1

您需要通过添加slideR功能，在第一个孩子拥有active课程之前执行firstLoad循环，就像在此更新的代码段中一样。

＆＃13;

＆＃13;

firstLoad();
function firstLoad() {
  while(!$('#menu > ul > li').first().hasClass("active")) {
    slideR();
  }
}

function slideR() {
  $('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
    "left": "-=300px"
  }, 200);
}

function slideL() {
  $('#menu > ul > li').last().animate({
    "left": "+=300px"
  }, 200, function() {
    $(this).prependTo('#menu > ul').css('left', '0px');
  });
}

$('.arrow-right').click(function() {
  slideR();
});
$('.arrow-left').click(function() {
  slideL();
});

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}
nav {
  position: relative;
  max-width: 300px;
  margin: 25px auto;
}
nav > ul {
  height: 50px;
  text-align: center;
  max-width: 300px;
  overflow: hidden;
  border: 2px solid #ccc;
  font-size: 0;
}
nav > ul > li {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}
nav > ul > li a {
  color: #000;
  display: block;
  text-decoration: none;
  line-height: 50px;
  padding: 0 15px;
  transition: 0.25s;
}
nav > ul > li a:hover {
  background: #000;
  color: #fff;
}
.arrows > .arrow {
  position: absolute;
  top: 50%;
  border: 2px solid #f00;
  z-index: 99;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  cursor: pointer;
  display: block;
}
.arrow-right {
  right: 0;
}
.arrow-left {
  left: 0;
}
.active a {
  color: #029A55;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
    <li><a href="#">Menu 5</a>
    </li>
    <li><a href="#">Menu 6</a>
    </li>
    <li><a href="#">Menu 7</a>
    </li>
    <li><a href="#">Menu 8</a>
    </li>
    <li class="active"><a href="#">Menu 9</a>
    </li>
    <li><a href="#">Menu 10</a>
    </li>
    <li><a href="#">Menu 11</a>
    </li>
  </ul>
  <div class="arrows">
    <span class="arrow arrow-right"></span>
    <span class="arrow arrow-left"></span>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;