我一直在研究这个问题,但是我的问题没有找到一个好的答案。
所以,我创建了一个 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(); }
})
})
有人可以给我一个提示/解决方案来做到这一点吗? 我是新手,但我真的试图找到解决方案。也许我只是在我的搜索中使用了错误的标记词......
任何帮助都会非常感激。
干杯。
答案 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/
我希望这对您的菜单有所帮助并祝您好运!