Question

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

所以，我创建了一个 jQuery accordion 菜单，它位于不可滚动页面的底部，这意味着我希望每个子菜单元素的子项从下到上垂直滑动< / em>，而不是相反。这意味着父元素（也就是菜单部分的标题）仍应位于顶部，显示其下方的其他元素。

我已经使用菜单的当前状态创建了一个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(); } }) })

有人可以给我一个提示/解决方案来做到这一点吗？我是新手，但我真的试图找到解决方案。也许我只是在我的搜索中使用了错误的标记词......

任何帮助都会非常感激。

干杯。

Answer 1

将Navmenu的位置设置为相对于底部，而不是顶部。

#Navmenu {
    bottom: 1%; /* NOT top: 85%; */
}

Answer 2

代码似乎过于复杂。我会用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);
}

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

Answer 3

这是CSS的一部分。更新CSS中的以下ID

#Navmenu {
    top: 85%;    //remove this line
    bottom: 1px;
}

Answer 4

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

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

然后，你真正需要的是在ul ul选择器上创建CSS，position：absolute：

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

然后如上所述直接从底部放置它们，或类似地：http://jsfiddle.net/t4KjC/2/

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

页面底部的jQuery Accordion菜单

4 个答案: