页面底部的jQuery手风琴菜单

我一直在研究这个问题，但没有找到一个很好的答案来解决我的问题。页面底部的jQuery手风琴菜单

所以，我创建了一个jQuery的手风琴菜单那支在unscrollable页面的底部，这意味着我要各子要素的孩子从底部垂直滑动到顶部，而不是其他方式周围。这意味着父元素（也就是菜单部分的标题）仍应位于顶部，显示其下的其他元素。

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

可能有人给我一个提示/解决方案得到这个权利？我是新来的，但真的试图找到一个解决方案。也许我只是在我的搜索中使用了错误的标签...

任何帮助将非常感激。

干杯。

来源

2013-08-06 djur

它是CSS的一部分。更新下面的ID在CSS

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

来源

2013-08-06 18:40:45

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

 $(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-06 18:40:47

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

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

来源

2013-08-06 18:42:00 andi

容易听起来，这是我的主要错误。因为我之前无法使用'底部'值，所以我使用'顶部'值。现在很好。干杯!;） – djur

代码似乎过于复杂。我会使用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-06 18:43:58

解决方案实际上比我想象的要简单，但是，我的代码似乎过于复杂。我已经注意到将来的参考。 ;）非常感谢。 – djur

页面底部的jQuery手风琴菜单

回答

相关问题