0

我正在尝试使用 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>

它目前并没有真正做任何事情，并且希望对此有任何帮助。另外，如果我确实可以正常工作，是否有任何浏览器特定的事情需要注意？

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

谢谢

4

2 回答 2

0

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

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

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

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

于 2012-06-06T13:58:46.940 回答
0

在不过多更改 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。此外，每个部分的宽度为 80px，高度为 20px <li>，您可以将其更改为适合您内容的任何内容。

于 2012-06-06T14:11:44.323 回答