Question

当我将li项目更改为仅在主页的导航栏中的链接（使用hef）时，显示关于和联系人（这些是没有子菜单的链接）。 REgister Company和Buy Company未显示（这些是与子菜单的链接）。我在jsfiddle.net/vaanipala/rVNQk/7的代码。可能是什么问题呢？

仅供参考，如果li项目不是链接，则导航栏显示正常。

谢谢。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gama Corporate Services</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#submenu1,#submenu2").children().hide();
    $("#subsubmenu1").children("ul").hide();

    $("#submenu1,#submenu2").hover( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(); 
    });

    $("#subsubmenu1").hover(
        function(){//onmouseover

            $(this).children("ul").animate({marginLeft:"130px"}).css({
                                "position":"absolute",
                                "z-index":"-1",
                                "width":"120px",
                                "display":"block"});
            $(this).children("ul").show();
        },
        function(){//onmouseout
            $(this).children("ul").animate({marginLeft:"0"}).css({"position":"absolute","z-index":"-1"});
            $(this).children("ul").hide();
        }); 
});
</script>
</head>

<body>
<div class="contentwrapper">
<div id="header">
<div id="logo">
    <img src="images/logo.png" />
</div>
<!--<div id="company_name">
    Gama Corporate Services Sdn Bhd
</div>-->
<div id="navbar">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li id="submenu1"><a href="a.html">Register Company</a>
            <ul>
                <li id="subsubmenu1"><a href="b.html">New Sendirian Berhad Registration</a>
                    <ul>
                        <li><a href="#">Company Price</a></li>
                        <li><a href="#">Register New Company</a></li>
                        <li><a href="#">Steps to Incorporate</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="submenu2"><a href="c.html">Buy Company</a>
            <ul>
                <li><a href="#">Sendirian Berhad Ready Made Companies in Malaysia</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</div>

<div id="leftcolumn">hello</div>
<div id="contentcolumn">Welcome to Gama Corporate Services.
This website is under construction</div>
<div id="rightcolumn">how ru</div>
<div id="footer">copyright gama corporate services</div>
</div><!--end contentwrapper-->

</body>
</html>

的style.css

 /* CSS Document */
html body{
    padding:0;
    margin:0 auto;
}

.contentwrapper{
    width:900px;
    margin-left:auto;
    margin-right:auto;
    height: auto !important;
}
#header{
/*  height:20%;
*/  width:900px;
    height:280px;
    /*background-color:#009999;*/
    background-image:url('../images/bg_image.jpg');
    background-repeat:no-repeat;
    float:left;
    text-align:center;
}
#logo{
/*margin-top:15%;*/
float:left;
width:40%;
}
/*#company_name{
float:left;
font:"Times New Roman", Times, serif;
font-size:36px;
margin-top:20%;
}*/
#navbar{
/*  height:10%;
*/  width:900px;
    color:#ffffff;
    float:left;
    margin-top:2%;
    padding:0;
    z-index:0;
    position:relative;

}
#menu{
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
}

#menu li{
float:left;
    display:block;
    width:120px;
    text-align:center;
    background-color:#FF0000;
    padding:0;
    margin:0;
}
#menu li a{
display:block;
width:120px;
text-decoration:none;
line-height:25px;
padding:0;
}
#submenu1 ul, #submenu2 ul{
    float:left;
    display:block;
    width:120px;
    padding:0;
    margin:0;
}
/*#menu li ul ul li*/
#subsubmenu1 ul li
{position:relative;
left:0;
top:-30px;
background:#3399CC;
}


#leftcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#contentcolumn{
    float:left;
    width:60%;
    background-color:#ffffff;
}
#rightcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#footer{
/*  height:10%;
*/  width:inherit;
    padding-top:4px;
    background-color:#009999;
    text-align:center;
}

Answer 1

你应该使用

$("#submenu1,#submenu2").children("ul").hide();

而不是

$("#submenu1,#submenu2").children().hide();
$("#subsubmenu1").children("ul").hide();

隐藏子菜单。这将显示带有子菜单的菜单。

您的链接<a href="a.html">Register Company</a>是子菜单“子菜单1”的子项，因此您的代码$("#submenu1,#submenu2").children().hide();只是隐藏它。这就是为什么你无法看到这些链接的原因。

jquery导航栏：列表项链接子菜单不显示

1 个答案: