javascript - 当主导航链接悬停时在侧面菜单中显示链接

Question

我想在侧边菜单中显示链接，这取决于悬停在顶部导航中的链接，并显示它们直到悬停另一个链接。这是我拥有的:

HTML:

<ul class="nav navbar-nav">
  <li class="nav"><a class="toggle" href="#">LINK 1</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 2</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 3</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 4</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 5</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 6</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
     </div>
</div>

jQuery:

$(document).ready(function() {
    $('.toggle').hover(function () {
        $('#sideMenuLinks').show('slow');
    });
});

这仅在悬停时显示，但显然仅适用于 sideMenuLinks，我有更多不同 ID 的链接，因此如果我将鼠标悬停在“LINK 2”上，这些链接将被替换，依此类推。有道理吗？

谢谢!

Answer 1

我会向主导航链接添加一个 data-* 属性，如下所示:

<ul class="nav navbar-nav">
  <li class="nav"><a class="toggle" data-menu="first" href="#">LINK 1</a></li>
  <li class="nav"><a class="toggle" data-menu="second" href="#">LINK 2</a></li>
  <li class="nav"><a class="toggle" data-menu="third" href="#">LINK 3</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks">
        <ul id="first" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
        <ul id="second" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
        <ul id="third" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
     </div>
</div>

然后你可以在悬停时获得data-menu值:

$(".toggle").hover(function() {
    $(".menuContent").each(function() {
        $(this).hide();
    });
    var menu = $(this).attr("data-menu");
    $('#' + menu).show('slow');
});

尚未对此进行测试，但这最终会使菜单更加动态。