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

Display links in side menu when main nav links are hovered

本文关键字：链接 菜单 显示 导航 悬停      更新时间：2023-09-26

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

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中有更多的链接，所以如果我悬停在"链接2"上，这些链接就会被替换，以此类推。有意义吗？

谢谢！

我会在主导航链接中添加一个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');
});

我还没有测试过，但这可能会让菜单更有活力。

如果我理解正确的话，当相应的链接悬停在页面上的其他地方时，你有几个ID，你只想让它显示出来。

所以，你能做的就是多做一点你要做的事情。想象一下你得到了这个HTML:

<ul class="nav navbar-nav">
    <li class="nav"><a class="toggle1" href="#">LINK 1</a></li>
    <li class="nav"><a class="toggle2" href="#">LINK 2</a></li>
    <li class="nav"><a class="toggle3" href="#">LINK 3</a></li>
</ul>
<div class="sideMenu">
    <div id="sideMenuLinks1">
        <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 id="sideMenuLinks2">
        <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 id="sideMenuLinks3">
        <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>

现在，您可以使用一个简单的for循环和您已经获得的jQuery来启动它。jQuery:

$(document).ready(function() {
    for(i=0,i<3,i++){
        classname = '.toggle'+i;
        id = '#sideMenuLinks'+i;
        $(classname).hover(function () {
             $(id).show('slow');
        });
    }
});

我还没有对此进行测试，但这是一个简单、全面的解决方案。希望这对你有所帮助！.

相关文章：