Question

我试图使用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>

它目前并没有真正做任何事情，并希望得到任何帮助。此外，如果我确实这样做了，是否有任何特定于浏览器的注意事项？

编辑：我没有提到当一个部分被扩展时，我希望它保持在那个状态，直到另一个部分被徘徊。

由于

Answer 1

这背后的想法是，无论你想悬停什么，都需要放在开始悬停的元素内。例如，如果您希望＃S2Wrapper将其内容悬停在其中，则需要将其包裹在元素周围。

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

然后你将隐藏.hover-stuff，只有在S2Wrapper悬停时才会显示它。此外，您可能希望将S2Wrapper相对和悬停填充绝对定位到您想要的长度和宽度。

原因是S2Wrapper是悬停的元素，只要它不再被徘徊，菜单就会下降，然后它就会重新上升。

Answer 2

如果没有更改您的DOM结构，您可以尝试以下方法：

HTML：

<div id="main">
<div id="S1Hover" class="event">Section 1</div>
<div class="wrapper">
<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 class="wrapper">
<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>

CSS：

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

使用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。另外，对于每个<li>部分，我的宽度为80px，每个{{1}}部分的高度为20px，您可以将其更改为适合您内容的任何内容。

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

2 个答案: