纯CSS下拉菜单单击以隐藏还是显示div？

Jay Patel 发表于 Dev

杰伊·帕特尔（Jay Patel）

我做了以下。我想单击列表项以切换下一个div。

JSFiddle Demo

当click上list item，

<li><a href="#">Create/Read/Manipulate</a></li>

下次div.submenu显示时，再次单击以隐藏以反映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>

杰伊·帕特尔（Jay Patel）

我找到了两种不同的解决方案，

1.）使用<input/>类型复选框，

li input[id][type="checkbox"] {
    position: absolute;
    left: -1000px;
    top: -1000px;
}
input[id] ~ div[id] {
    display: none;
}
input[id]:checked ~ div[id] {
    display: block;
}

观看演示 `jsFiddle`

2.）打开子菜单，当鼠标悬停时，

#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;
}