Question

我正在尝试创建一个粘性的手风琴菜单，其中背景根据单击的按钮滚动，但菜单仍保留在其位置。由于它很粘，我使用的是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>

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

$('#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,
    });

菜单移动正常，但是当点击不同的菜单项时，我仍然坚持让它回到原来的位置。

注意：我想我＆＃34;有＆＃34;使用position:fixed作为菜单，因为我的背景不断向上和向下滚动。

Answer 1

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

动画回到原始位置

1 个答案: