Jquery 如何实现与其他不相关链接重叠的水平滑动导航栏

我正在尝试使用JQuery创建一个滑动导航菜单。我的想法是，我将有两个或更多的主要部分，每个部分将有几个小节

当用户将鼠标悬停在一个部分上时，子部分将水平展开，如果另一个部分当前已打开并显示其子部分，则它将向后折叠以仅显示主部分

我已经实现了一些基本代码来扩展节的宽度，如下所示

jQuery(document).ready(function($) {

// Section 1
$('#S1Hover').mouseover(function() {
    $(this).css('cursor', 'pointer');
    if ($('#S2wrapper').is(":visible")){
        $('#S2wrapper').animate({width: 0})
    }
    $('#S1wrapper').animate({width: 400})
});

// Section 2
$('#S2Hover').mouseover(function() {
    $(this).css('cursor', 'pointer');
    if ($('#S1wrapper').is(":visible")){
        $('#S1wrapper').animate({width: 0})
    }
    $('#s2wrapper').animate({width: '300'});
});   
});

这方面的HTML是

<div id="main">
    <div id="S1Hover" class="event">Section 1</div>
    <div id="S1wrapper">
    <ul id="S1">
        <li id="SS1"><a href="#">SS1</a></li>
        <li id="SS2"><a href="#">SS2</a></li>
        <li id="SS3"><a href="#">SS3</a></li>
        <li id="SS4"><a href="#">SS4</a></li>
    </ul>
    </div>

    <div id="S2Hover" class="event">S2</div>
    <div id="S2wrapper">
    <ul id="projects-nav">
        <li id="SS5"><a href="#">SS5</a</li>
        <li id="SS6"><a href="#">SS6</a></li>
        <li id="SS7"><a href="#">SS7</a></li>
    </ul>
    </div>
</div>      

第一节






S2

不过，它目前并没有真正做任何事情，如果能在这方面提供帮助，我们将不胜感激。另外，如果我真的能做到这一点，是否有任何特定于浏览器的东西需要注意

编辑：我没有提到当一个分区被扩展时，我希望它保持该状态，直到另一个分区被悬停

---

谢谢

这背后的想法是，无论您想要悬停什么，都需要放置在开始悬停的元素中。例如，如果希望#S2Wrapper将其内容悬停在内部，则需要围绕元素进行包装

<div id="S2Wrapper">
 <div class="hover-stuff">
  <ul>
   <li>This is hovered</li>
  </ul>
 </div>
</div>

这是悬停的

然后，您将隐藏.hover内容，并仅在S2Wrapper悬停时显示它。此外，您可能希望将S2Wrapper定位为相对位置，并将stuff绝对悬停到所需的长度和宽度

---

原因是S2Wrapper是被悬停的元素，每当它不再悬停并且菜单下降时，它就会返回。如果不太改变DOM结构，您可以尝试以下操作：

HTML:

Javascript:

   jQuery(document).ready(function ($) {

        $('.event').hover(function () {
            $(this).next().find('li').animate({width:80}, 750);
        }, function () {
            $(this).next().find('li').animate({ width: 0 }, 1000);
        });
    });

---

我会给包装器一个类，而不是每个类上的id。另外，我有一个硬编码值，每个

部分的宽度为80px，高度为20px，您可以将其更改为适合您的内容的任何内容。

很抱歉，我没有提到。。。当你将鼠标悬停在一个区域上，它会展开，然后移除鼠标，我打算让它保持展开状态，直到另一个区域悬停，因为你可以使下拉列表在悬停时可见，但不要让它在你离开悬停时消失。然后可以使用jquery$（“div”）.each（function（）{}和我将为每个hover down类提供一个附加的类名，当新的部分悬停在上面时，该类名将消失。

.wrapper ul{
        margin:0;
        padding:0;
    }
    .wrapper ul li{
        float:left;
        list-style:none;
        margin-right:6px;
        width:0;
        height:20px;
        overflow:hidden;
    }

   jQuery(document).ready(function ($) {

        $('.event').hover(function () {
            $(this).next().find('li').animate({width:80}, 750);
        }, function () {
            $(this).next().find('li').animate({ width: 0 }, 1000);
        });
    });