构建自定义CSS水平菜单
JavaScript to jQuery syntax Building custom CSS horizontal menu
这是一个使用传统JavaScript的水平菜单。
function createcssmenu()
{
var ultags = document.getElementById("navmenu").getElementsByTagName("ul");
for (var t = 0; t < ultags.length; t++)
{
ultags[t].style.top = ultags[t].parentNode.offsetHeight -1 + "px";
ultags[t].parentNode.onmouseover = function()
{
this.style.zIndex = 100;
this.getElementsByTagName("ul")[0].style.visibility = "visible";
this.getElementsByTagName("ul")[0].style.zIndex = 0;
}
ultags[t].parentNode.onmouseout = function()
{
this.style.zIndex = 0;
this.getElementsByTagName("ul")[0].style.visibility = "hidden";
this.getElementsByTagName("ul")[0].style.zIndex = 100;
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false);
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu);
我需要使用jQuery语法重新编写。
where I came to:
$(document).ready(function ()
{
$('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px");
$('#navmenu ul').parent().bind('mouseover', function ()
{
$(this).css('z-index', 100);
$('#navmenu ul').css({ 'visibility': 'visible', 'z-index': 0 });
});
$('#navmenu ul').parent().bind('mouseout', function ()
{
$(this).css('z-index', 0);
$('#navmenu ul').css({ 'visibility': 'hidden', 'z-index': 100 });
});
});
它不能正常工作。
我用this.getElementsByTagName("ul")[0]
线还是有问题。
查看JSfiddle http://jsfiddle.net/sublay/HCajr/
它应该工作在一个正常的菜单。
谢谢!
相关问题JavaScript到jQuery语法转换
我想这就是你想要的。
$(document).ready(function ()
{
$('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px");
$('#navmenu ul').each(function(){
$(this).css('top', $(this).parent().height() - 1 + "px")
});
$('#navmenu ul').parent().bind('mouseover', function ()
{
$(this).css('z-index', 100);
$('ul',this).css({ 'visibility': 'visible', 'z-index': 0 });
});
$('#navmenu ul').parent().bind('mouseout', function ()
{
$(this).css('z-index', 0);
$('ul',this).css({ 'visibility': 'hidden', 'z-index': 100 });
});
});
与其尝试重写上面的javascript,不如简化它。
看看这个小提琴- http://jsfiddle.net/DeHQ5/
$(document).ready(function () {
$('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px");
$('#navmenu > li').bind('mouseover', function () {
$(this).children('ul').css({
'visibility': 'visible',
'z-index': 0
});
});
$('#navmenu > li').bind('mouseout', function () {
$(this).children('ul').css({
'visibility': 'hidden',
'z-index': 100
});
});
});
主要的变化是初始的兄弟选择器#navmenu > li
。
相关文章:
- 水平菜单子菜单
- 如何创建 HTML 文本框,该文本框顶部有一个水平菜单选项卡可供选择
- 加载 Iframe src,并从水平下拉菜单中进行选择
- AngularJs 过渡水平菜单与 ng-show
- 将子菜单添加到水平菜单
- 第二次单击时关闭水平下拉菜单
- 对于移动网络套件,当您触摸/拖动水平菜单栏时,如何使水平菜单栏可滚动
- 如何使水平菜单的按钮起作用
- 水平Javascript菜单错误
- 如何将带有垂直子菜单的水平菜单转换为带有子菜单的垂直手风琴菜单
- 水平滚动菜单(手动)
- 如何在水平菜单中以绝对位置向下推送内容
- 水平菜单和具有公共边界的子菜单,它们也必须在ie7中工作
- 包含具有动态宽度的列表项的无序列表-水平菜单
- jquery上的悬停滑动垂直和水平菜单
- 点击即可水平移动菜单
- CSS垂直导航菜单,带有水平子菜单和半透明带
- 当相对于可用的浏览器窗口没有水平空间时,以相反的方向打开CSS子菜单
- 如何:居中水平菜单&子菜单
- 与水平页面一起滚动的菜单