1

我正在尝试创建一个粘性手风琴菜单，其中背景根据单击的按钮滚动，但菜单仍保留在其位置。由于它很粘，我正在使用position:fixed. 这是 HTML：

<div id="nav">
<ul>
    <li><a id="home" class="menu-link" href="#section0"><img src="images/home.png" /></a></li>
    <li><a id="aboutus" class="menu-link" href="#section1"><img src="images/aboutus.png" /></a>
        <ul class="submenu">
        <li><a id="submenu1" class="menu-link" href="submenu1.php"><img src="images/submenu1.jpg" /></a></li>
        <li><a id="submenu2" class="menu-link" href="submenu2.php"><img src="images/submenu2.jpg" /></a></li>
        </ul>
    </li>
    <li><a id="dances" class="menu-link" href="#section2"><img src="images/dances.png" /></a></li>
    <li><a id="packages" class="menu-link" href="#section3"><img src="images/packages.png" /></a>
        <ul class="submenu">
        <li><a id="submenu3" class="menu-link" href="submenu3.php"><img    src="images/submenu3.jpg" /></a></li>
        <li><a id="submenu4" class="menu-link" href="submenu4.php"><img src="images/submenu4.jpg" /></a></li>
        </ul>
    </li>
    <li><a id="gallery" class="menu-link" href="#section4"><img src="images/gallery_menu.png" /></a>
        <ul class="submenu">
        <li><a id="submenu5" class="menu-link" href="submenu5.php"><img src="images/submenu5.jpg" /></a></li>
        <li><a id="submenu6" class="menu-link" href="submenu6.php"><img src="images/submenu6.jpg" /></a></li>
        </ul>
    </ul>
</div>

我正在寻找手风琴（像这样），但我无法使用 slideUP、slideToggle 等（可能是因为position:fixed）。因此，我尝试计算单击的菜单项具有的子项数量，并将其下方的所有其余菜单移动适当的数量。代码是这样的：

$('#nav ul li a').bind('click',function(event){
    var no_of_child=$(this).parent('li').children('ul').index()+1;
    var clicked_position=$(this).position();
    if(no_of_child>0){
        var top_rel=60*no_of_child;
        $(this).parent('li').nextAll().children('a').animate({
        top: "+="+top_rel,
    });

菜单移动得很好，但是当单击不同的菜单项时，我坚持让它回到原来的位置。

注意：我认为我“必须”使用position:fixed菜单，因为我的背景不断上下滚动。

4

1 回答 1

1

将 div包裹<div id="nav">在固定的 div 中，并将导航 div 更改为相对定位。

于 2012-10-25T21:43:14.383 回答