0

我一直在研究这个问题，但没有找到一个很好的答案来解决我的问题。

因此，我创建了一个jQuery 手风琴菜单，它贴在不可滚动页面的底部，这意味着我希望每个子菜单元素的子元素从底部垂直滑动到顶部，而不是相反。这意味着父元素（又名菜单部分的标题）仍应位于顶部，在其下方显示其他元素。

我已经用我的菜单的当前状态创建了一个jsfiddle，但这就是我的 jQuery 代码现在的样子：

$(document).ready(function(){
$("#Navmenu h3").click(function(){
$(“#Navmenu ul ul”).slideUp();
    if(!$(this).next().is(":visible"))
    {
    $(this).next().slideDown();
    } else { $(this).next().slideUp(); }
    })
})

有人可以给我一个提示/解决方案来解决这个问题吗？我对此并不陌生，但确实试图找到解决方案。也许我只是在搜索中使用了错误的标签词......

任何帮助将非常感激。

干杯。

4

4 回答 4

1

代码似乎过于复杂。我会改用 jQuery.toggle。

例子：

您有两个 UL（每个都包含其链接子集）

JS 小提琴：http: //jsfiddle.net/UkVCj/3/

JS：

$("#MenuToggle1").click(function(event){
    event.preventDefault();     
    $('#myMenu ul#first').toggle('slow');
});

CSS：

$("#MenuToggle2").click(function(event){
    event.preventDefault();     
    $('#myMenu ul#second').toggle('slow');
});

#myMenu ul#first, #myMenu ul#second{
    display: none;
}

#myMenu ul#second{
    background-color: rgb(180,180,180);
}

#myMenu ul li{
    display: inline-block;
    width: 49%;
}
#myMenu{
     position: fixed;
     bottom: 0;
    width: 100%;
    text-align: center;
        background-color: rgb(100,100,100);
}

** 请在使用前优化此代码，只是想向您展示一般概念。

于 2013-08-06T18:43:58.697 回答
1

将导航菜单的位置设置为相对于底部，而不是顶部。

#Navmenu {
    bottom: 1%; /* NOT top: 85%; */
}
于 2013-08-06T18:42:00.460 回答
0

它是 CSS 的一部分。在 CSS 中更新以下 id

#Navmenu {
    top: 85%;    //remove this line
    bottom: 1px;
}
于 2013-08-06T18:40:45.877 回答
0

首先，这是您需要的脚本的简化版本：

        $(document).ready(function () {
            $("#Navmenu h3").click(function () {
                $(this).siblings("ul").slideToggle();
            });
        });

然后，您真正需要的是在 ul ul 选择器上制作 CSS，位置：绝对：

 #Navmenu ul ul {
    display: none;
    position:absolute;
    bottom:75px;
}

然后像我上面所说的那样直接从底部定位它们，或者类似的：http: //jsfiddle.net/t4KjC/2/

我希望这对您的菜单有所帮助并祝您好运！

于 2013-08-06T18:40:47.283 回答