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

Question

我在我的多级导航菜单中实现了 jQuery 'magic line'，它似乎适用于第一个子导航，但如果我添加更多，它就会中断。

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

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

将鼠标悬停在主导航（主页）中的第一个子项上
然后将鼠标悬停在 'HOME' 项的子项上 - 魔术线将完美运行。
现在将鼠标悬停在主导航中的第二个子项上（关于）
然后将鼠标悬停在 'ABOUT' 列表的子项上 - 魔法线将不起作用。

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

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 select 任何具有 id select 或 # 的对象时，它只会 return 找到具有给定 id 的第一个对象。

取而代之的是，我有 select 元素，它位于当前 li 元素内，该元素从 magicLinePref($(this));.

传递过来

li.find("#magic-line"); 在当前 li 中找到 ID 为 magic-line 的元素。 class select 或 .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>

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

Iterating over multiple <ul> items to make a jQuery script work without repeating code

javascript

css

jquery

magicline