javascript - jQuery 导航轮播

Question

我正在尝试制作类似轮播的导航和子导航。

这个脚本的工作原理几乎符合我的预期: https://jsfiddle.net/xpvt214o/23270/

它的工作原理如下:
如果导航溢出，则使下一个箭头可见。
如果我们向右滚动，则左箭头可见。
如果导航不溢出，则隐藏两个箭头。

在第一个脚本中我遇到了一些问题:
1)两个导航中的上一个和下一个箭头适用于第一个导航
2)当我向右滚动并真正到达导航末尾时，我需要在隐藏之前再次单击下一个箭头。

<小时/>

为了使适当的箭头与导航配合使用，我将主代码包装在一个函数中，并将 $('.go-left') 替换为 nav.find('.go-left) ') 和右箭头相同。这是代码: https://jsfiddle.net/0z5u4vyt/5/

箭头应该起作用，但实际上不起作用。拜托，我需要你的帮助!

Answer 1

在您的 javascript 代码中 var prevArrow = nav.find('.go-left'); 和 var nextArrow = nav.find('.go-right'); code> 没有获得值，因此将代码更改为

var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');

function navCarousel(el) {
    var nav = el;
    var navFirstItem = nav.find('li:first-child');
    var navLastItem = nav.find('li:last-child');
    var prevArrow = nav.siblings('.go-left');
    var nextArrow = nav.siblings('.go-right');

    function checkNavOverflow() {
      if (nav.prop('scrollWidth') > nav.width() &&
         (nav.find('ul').width() - navLastItem.offset().left) < 51) {
        nextArrow.css('display', 'block');
      } else {
        nextArrow.css('display', 'none');
      }

      if (navFirstItem.offset().left < 15) {
        prevArrow.css('display', 'block');
      } else {
        prevArrow.css('display', 'none');
      }
    }
    checkNavOverflow();
    $(window).on('resize', function() {
      checkNavOverflow();
      // console.log(nav.find('ul').width() - navLastItem.offset().left);
    });
    prevArrow.click(function() {
      var pos = nav.scrollLeft() - 200;
      nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
    });
    nextArrow.click(function() {
      var pos = nav.scrollLeft() + 200;
      nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
    });
}

navCarousel($('.category-navigation .category-navigation-container'));

navCarousel($('.subcategory-navigation .subcategory-navigation-container'));

body {
  background: #20262e;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
}
.category-navigation, .subcategory-navigation {
  background-color: #fff;
  position: relative;
  border-bottom: 1px solid grey;
}
.category-navigation-container, .subcategory-navigation-container {
  overflow: hidden;
}
.category-navigation ul, .subcategory-navigation ul {
  list-style: none;
  display: flex;
  white-space: nowrap;
}
.category-navigation ul li, .subcategory-navigation ul li {
  padding: 20px;
}
.category-navigation .go-left, .subcategory-navigation .go-left, .category-navigation .go-right, .subcategory-navigation .go-right {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-color: grey;
  z-index: 9;
  border-radius: 50%;
  padding: 10px;
  text-align: center;
}
.category-navigation .go-left, .subcategory-navigation .go-left {
  left: 0;
}
.category-navigation .go-right, .subcategory-navigation .go-right {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-navigation">
  <div class="go-left">&larr;</div> 
  <div class="category-navigation-container">
    <ul>
      <li><a href="#">Category Item 1</a></li>
      <li><a href="#">Category Item 2</a></li>
      <li><a href="#">Category Item 3</a></li>
      <li><a href="#">Category Item 4</a></li>
      <li><a href="#">Category Item 5</a></li>
      <li><a href="#">Category Item 6</a></li>
      <li><a href="#">Category Item 7</a></li>
      <li><a href="#">Category Item 8</a></li>
      <li><a href="#">Category Item 9</a></li>
    </ul>
  </div>
  <div class="go-right">&rarr;</div>
</div>

<div class="subcategory-navigation dropdown">
  <div class="go-left">&larr;</div>
    <div class="subcategory-navigation-container">
      <ul>
        <li>
          <a href="#">
            <div>Subitem 1</div>
          </a>
        </li>
       </ul> 
    </div>
  <div class="go-right">&rarr;</div>
</div>