页面底部的jQuery Accordion菜单

时间:2013-08-06 18:23:13

标签: jquery css drop-down-menu

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

所以,我创建了一个 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(); }
    })
})

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

任何帮助都会非常感激。

干杯。

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分: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);
}    

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

首先,这是您需要的简化脚本版本:

        $(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/

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