[英]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語法重新編寫它。
這是我來的地方:
$(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。
看看這個小提琴 - 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
。
我想這就是你想要的FIDDLE
$(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 });
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.