问题描述
CSS没有点击处理程序。因此,不可能使用标准CSS。您可以使用一种称为“复选框hack”的方法,但是我谦虚地认为,它有点笨拙,并且会像您的用例要求那样在导航菜单中使用,这很尴尬。因此,我建议使用jQuery或Javascript。这是使用jQuery的一种非常简单的解决方案。
基本上,我们从一开始就隐藏了子导航,display: none;
然后使用jQuery,当单击“ .parent”时,将类“
.visible”切换到显示子导航元素(嵌套的UL)display: block;
。再次单击时,它会在删除类时消失。
请注意,要使此方法起作用,每个嵌套<UL>
的“ sub-nav”都 具有.sub-nav
该类,并且其父元素(the <LI>
)具有.parent
该类。另外,由于它使用jQuery,因此您需要将jQuery库连接到您的站点。您可以自己托管它并像往常一样链接它,也可以从Google的图书馆服务(推荐)中链接它。
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
解决方法
我需要建立一个包含5个选项的菜单,单击某个菜单后,将出现一个新的子菜单。我完全不知道该怎么做。
/**Navigation */
nav {
border: 1px solid red;
float: left;
margin-right: 35px;
min-height: 280px;
}
nav li {
text-decoration: none;
font-weight: normal;
color: red;
list-style: none;
}
/**Content */
#section {
background-color: ;
border: 1px solid;
font: normal 12px Helvetica,Arial,sans-serif;
margin-left: 180px;
}
.clearfix:before,.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="clearfix"></div>
<nav>
<ul>
<li><a href="index.html" accesskey="1"> Home </a> </li>
<li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>
<ul>
<li><a href="Commercial.html">Commercial</a> </li>
<li><a href="Residential.html">Residential</a> </li>
<li><a href="heritage.html">Heritage</a> </li>
<li><a href="Rennovations.html">Rennovations</a> </li>
</ul>
<li><a href="services.html" accesskey="3"> Services </a> </li>
<li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
<li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
</ul>
</nav>