javascript - 如何将菜单滚动到菜单中的当前元素？

Question

我的菜单包含 11 个元素。显示其中 3 个。有像 slider 之类的按钮，可以帮助滚动此菜单。在我的网站上，当元素的 href == url(突出显示当前元素)时，我为元素提供特殊的类。我需要在窗口加载时将此当前元素移动到菜单的第一个左侧位置，因此在加载页面时必须滚动菜单列表，并且无论列表中的位置如何，当前元素都保留在第一个左侧位置。这就是我的代码:

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();
});

* {
  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;
}

<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>

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

var curry = document.getElementsByClassName('active')[0];
$(window).load(function() {
  curry.style.left = '0px';
});

但是什么也没发生。

Answer 1

您只需通过添加 firstLoad 函数执行 slideR 循环，直到第一个子级具有 active 类，如下所示更新了代码片段。

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();
});

* {
  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;
}

<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>