我做了以下内容。我想点击列表项来切换下一个 div。
当点击
list item
时,
<li><a href="#">Create/Read/Manipulate</a></li>
下一个 div.submenu
显示,再次点击隐藏以反射(reflect) jQuery 中类似切换的效果。
<div class="submenu">
<a href="#">DOM</a><br />
<a href="#">Reader/Writer</a><br />
<a href="#">SimpleXML</a><br />
</div>
我不想使用 jQuery。欢迎使用纯 CSS 或 JavaScript。
#leftcolumn {
width: 18%;
margin: 3px;
padding: 0;
display: inline;
}
#leftcolumn ul.leftmenu {
list-style: none;
text-align: left;
margin: 0 5px 3px 10px;
padding: 0px;
}
#leftcolumn ul.leftmenu li {
border-bottom: 1px solid #EFF0F1;
font-size:14px;
padding: 1px 0px;
}
#leftcolumn ul.leftmenu li a {
line-height: 20px;
color: #333;
text-decoration: none;
}
#leftcolumn ul.leftmenu li a:hover {
color: #FA7837;
}
#leftcolumn ul.leftmenu li#activemenu a {
color: #FA7837;
}
#leftcolumn ul.leftmenu .submenu {
margin: 3px 0 3px 7px;
}
#leftcolumn ul.leftmenu .submenu a {
color: #333;
font-weight: normal;
font-size:14px;
text-decoration: none;
line-height: 1.3em;
}
#leftcolumn ul.leftmenu .submenu a:hover {
color: #F9864D;
text-decoration:underline;
}
#leftcolumn ul.leftmenu .submenu a#activesubmenu {
color: #F9864D;
}
<table id="maintable" cellspacing="0" cellpadding="0">
<tr>
<td id="leftcolumn" >
<ul class="leftmenu">
<li><a href="#">CDATA</a></li>
<li><a href="#">Create/Read/Manipulate</a></li>
<div class="submenu">
<a href="#">DOM</a><br />
<a href="#">Reader/Writer</a><br />
<a href="#">SimpleXML</a><br />
</div>
<li><a href="#">Entity Declaration</a></li>
<li><a href="#">Create/Read/Manipulate</a></li>
<div class="submenu">
<a href="#">DOM</a><br />
<a href="#">Reader/Writer</a><br />
<a href="#">SimpleXML</a><br />
</div>
</ul>
</td>
</tr>
</table>
最佳答案
您可以使用悬停。
#leftcolumn {
width: 18%;
margin: 3px;
padding: 0;
display: inline;
}
#leftcolumn ul.leftmenu {
list-style: none;
text-align: left;
margin: 0 5px 3px 10px;
padding: 0px;
}
#leftcolumn ul.leftmenu li {
border-bottom: 1px solid #EFF0F1;
font-size:14px;
padding: 1px 0px;
}
#leftcolumn ul.leftmenu li a {
line-height: 20px;
color: #333;
text-decoration: none;
}
#leftcolumn ul.leftmenu li a:hover {
color: #FA7837;
}
#leftcolumn ul.leftmenu li#activemenu a {
color: #FA7837;
}
#leftcolumn ul.leftmenu #submenu {
margin: 3px 0 3px 7px;
}
#leftcolumn ul.leftmenu #submenu a {
color: #333;
font-weight: normal;
font-size:14px;
text-decoration: none;
line-height: 1.3em;
}
#leftcolumn ul.leftmenu #submenu a:hover {
color: #F9864D;
text-decoration:underline;
}
#leftcolumn ul.leftmenu #submenu {
display: none;
}
#leftcolumn ul.leftmenu li:hover #submenu {
display: block;
}
#leftcolumn ul.leftmenu #submenu a#activesubmenu {
color: #F9864D;
}
<table id="maintable" cellspacing="0" cellpadding="0">
<tr>
<td id="leftcolumn" >
<ul class="leftmenu">
<li><a href="#">Syntax/Rules</a></li>
<li><a href="#">Data</a></li>
<li><a href="#">CDATA</a></li>
<li><a href="#">Create/Read/Manipulate</a>
<div id="submenu">
<a href="#">DOM</a><br />
<a href="#">Reader/Writer</a><br />
<a href="#">SimpleXML</a><br />
</div></li>
<li><a href="#">Entity Declaration</a></li>
<li><a href="#">How To Write</a></li>
</ul>
</td>
</tr>
</table>
关于javascript - 纯CSS下拉菜单点击隐藏还是显示div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26606528/