迭代多个 <ul> 项以使 jQuery 脚本工作而无需重复代码

Question

我在我的多级导航菜单中实现了一个 jQuery '魔术线'，它似乎与第一个子导航一起工作，但如果我添加更多它会中断。

我的问题是：我如何遍历其他子导航菜单以使其在我可能添加的许多子级项目中工作？ (<ul class="sy__list__secondary">)

请看我下面的代码。要重现我的问题，请按照以下步骤操作：

1. 将鼠标悬停在主导航 (HOME) 中的第一个子项上

2. 然后将鼠标悬停在“HOME”项的子项上 - 魔术线将完美运行。

3. 现在将鼠标悬停在主导航 (ABOUT) 中的第二个子项上

4. 然后将鼠标悬停在“关于”列表的子项上 - 魔术线将不起作用。

我的问题是：如何遍历其他子导航菜单以使其在我可能添加的许多子级项目中工作？

var $el, leftPos, newWidth;

$('.sy__list__secondary').each(function() {
  $(this).append("<li id='magic-line'></li>");
});

/* Cache it */
var $magicLine = $("#magic-line");

function magicLinePref() {
  $magicLine
    .width($(".sy__list__secondary.active li:first-child").width())
    .css("left", $(".sy__list__secondary.active li:first-child").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".sy__list__secondary li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  }, function() {
    $magicLine.stop().animate({
      left: $magicLine.data("origLeft"),
      width: $magicLine.data("origWidth")
    });
  });
}

$('.sy__list__primary > li').hover(function() {
  magicLinePref();
});

.sy__navigation {
  position: relative;
}

.sy__navigation__primary {
  background: #333333;
}

.sy__navigation__secondary {
  position: absolute;
  background: #031f37eb;
  left: 0;
  top: 50px;
  z-index: 10;
  width: 100%;
  display: none;
}

#magic-line {
  position: absolute;
  bottom: 0;
  padding: 0 !important;
  left: 0;
  width: 100px;
  height: 2px;
  background: #31B2E7;
}

.sy__list__primary>li:hover .sy__navigation__secondary {
  display: block;
}

ul.sy__list__secondary {
  justify-content: space-around;
  margin: auto;
  padding: 0;
  color: #ffffff;
}

ul.sy__list__primary {
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

ul.sy__list__primary span,
a {
  color: #ffffff;
}

ul.sy__list__primary li {
  display: inline-block;
  letter-spacing: 1px;
  font-size: 10px;
  box-sizing: border-box;
}

ul.sy__list__primary>li {
  padding: 20px;
}

ul.sy__list__secondary li a {
  padding: 15px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="sy__navigation">
  <div class="sy__navigation__primary">
    <div class="container">
      <div class="row">
        <ul class="sy__list__primary">
          <li><span>HOME</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary active">
                <li><a href="#">SUB 1A</a></li>
                <li><a href="#">SUB 1A</a></li>
                <li><a href="#">SUB 1A</a></li>
              </ul>
            </div>
          </li>
          <li><span>ABOUT</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary">
                <li><a href="#">SUB 2A</a></li>
                <li><a href="#">SUB 2A</a></li>
                <li><a href="#">SUB 2A</a></li>
              </ul>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

更新了magicLinePref() 函数并传递了各自的li 对象。使用li.find 获取.sy__list__secondary 和.#magic-line。

删除了var $magicLine = $("#magic-line"); 的全局声明。当 jQuery 选择任何带有 id 选择器 # 的对象时，它只会返回找到给定 id 的第一个对象。

取而代之的是，我选择了位于当前 li 元素内的元素，该元素从 magicLinePref($(this)); 传递过来。

li.find("#magic-line"); 在当前li 中查找ID 为magic-line 的元素。对于类选择器.sy__list__secondary 也是如此。

var $el, leftPos, newWidth;

$('.sy__list__secondary').each(function() {
  $(this).append("<li id='magic-line'></li>");
});

/* Cache it */

function magicLinePref(li) {
var $magicLine = li.find("#magic-line");
  $magicLine
    .width(li.find(".sy__list__secondary li:first-child").width())
    .css("left", li.find(".sy__list__secondary li:first-child").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  li.find(".sy__list__secondary li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  }, function() {
    $magicLine.stop().animate({
      left: $magicLine.data("origLeft"),
      width: $magicLine.data("origWidth")
    });
  });
}

$('.sy__list__primary > li').hover(function() {
  magicLinePref($(this));
});

.sy__navigation {
  position: relative;
}

.sy__navigation__primary {
  background: #333333;
}

.sy__navigation__secondary {
  position: absolute;
  background: #031f37eb;
  left: 0;
  top: 50px;
  z-index: 10;
  width: 100%;
  display: none;
}

#magic-line {
  position: absolute;
  bottom: 0;
  padding: 0 !important;
  left: 0;
  width: 100px;
  height: 2px;
  background: #31B2E7;
}

.sy__list__primary>li:hover .sy__navigation__secondary {
  display: block;
}

ul.sy__list__secondary {
  justify-content: space-around;
  margin: auto;
  padding: 0;
  color: #ffffff;
}

ul.sy__list__primary {
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

ul.sy__list__primary span,
a {
  color: #ffffff;
}

ul.sy__list__primary li {
  display: inline-block;
  letter-spacing: 1px;
  font-size: 10px;
  box-sizing: border-box;
}

ul.sy__list__primary>li {
  padding: 20px;
}

ul.sy__list__secondary li a {
  padding: 15px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="sy__navigation">
  <div class="sy__navigation__primary">
    <div class="container">
      <div class="row">
        <ul class="sy__list__primary">
          <li><span>HOME</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary">
                <li><a href="#">SUB 1A</a></li>
                <li><a href="#">SUB 1A</a></li>
                <li><a href="#">SUB 1A</a></li>
              </ul>
            </div>
          </li>
          <li><span>ABOUT</span>
            <div class="sy__navigation__secondary">
              <ul class="sy__list__secondary">
                <li><a href="#">SUB 2A</a></li>
                <li><a href="#">SUB 2A</a></li>
                <li><a href="#">SUB 2A</a></li>
              </ul>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</div>