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>

目前，它实际上并没有做任何事情，对此将不胜感激。另外，如果我确实可以正常工作，是否需要注意浏览器特定的事情？

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

谢谢

最佳答案

其背后的想法是，您想要悬停的任何东西都需要放置在开始悬停的元素内。例如，如果您希望＃S2Wrapper将其内容悬停在内部，则需要将其包装在元素周围。

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

然后，您将隐藏.hover-stuff，并且仅在将S2Wrapper悬停时才显示它。另外，您可能希望将S2Wrapper的相对位置和悬停填充的绝对位置设置为所需的长度和宽度。

原因是S2Wrapper是要悬停的元素，每当不再悬停该元素并且菜单下降时，它就会返回。