Question

我已经在多级导航菜单中实现了jQuery“魔术线”，它似乎可以在第一个子导航中使用，但是如果我添加更多，它会中断。

我的问题：我如何遍历其他子导航菜单，以使它可以跨我可能添加的许多子级别项目使用？（<ul class="sy__list__secondary">）

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

将鼠标悬停在主导航（HOME）中的第一个孩子上
然后将鼠标悬停在“ 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对象。使用.sy__list__secondary获取了.#magic-line和li.find。

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

相反，我有select元素位于从li传递过来的当前magicLinePref($(this));元素中。

li.find("#magic-line");在当前magic-line中查找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>

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

1 个答案: