javascript - 迭代多个
使 jQuery 脚本工作而无需重复代码的项目

Question

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

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

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

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

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

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>

score 1 · Accepted Answer

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

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

取而代之的是，我选择了位于当前li元素内部的元素，该元素从magicLinePref($(this));.

li.find("#magic-line");magic-line在 current中查找具有 id 的元素li。同样对于类选择器.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>

javascript - 迭代多个使 jQuery 脚本工作而无需重复代码的项目

1 回答 1

Related

Reference

javascript - 迭代多个
使 jQuery 脚本工作而无需重复代码的项目