Javascript 纯CSS下拉菜单单击隐藏或显示div？

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

当

单击
列表项上的
时

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

我不想使用jQuery。欢迎使用纯CSS或JavaScript


#leftcolumn{
宽度：18%；
保证金：3倍；
填充：0；
显示：内联；
}
#leftcolumn ul.leftmenu{
列表样式：无；
文本对齐：左对齐；
利润率：0.5px3px10px；
填充：0px；
}
#leftcolumn ul.leftmenu li{
边框底部：1px实心#EFF0F1；
字体大小：14px；
填充：1px0px；
}
#leftcolumn ul.leftmenu li a{
线高：20px；
颜色：#333；
文字装饰：无；
}
#leftcolumn ul.leftmenu li a:悬停{
颜色：#FA7837；
}
#leftcolumn ul.leftmenu li#activemenu a{
颜色：#FA7837；
}
#leftcolumn ul.leftmenu.子菜单{
保证金：3px0 3px7px；
}
#leftcolumn ul.leftmenu.子菜单a{
颜色：#333；
字体大小：正常；
字体大小：14px；
文字装饰：无；
线高：1.3em；
}
#leftcolumn ul.leftmenu.子菜单a:悬停{
颜色：#F9864D；
文字装饰：下划线；
}
#leftcolumn ul.leftmenu.子菜单a#Active子菜单{
颜色：#F9864D；
}



















您可以使用悬停


#leftcolumn{
宽度：18%；
保证金：3倍；
填充：0；
显示：内联；
}
#leftcolumn ul.leftmenu{
列表样式：无；
文本对齐：左对齐；
利润率：0.5px3px10px；
填充：0px；
}
#leftcolumn ul.leftmenu li{
边框底部：1px实心#EFF0F1；
字体大小：14px；
填充：1px0px；
}
#leftcolumn ul.leftmenu li a{
线高：20px；
颜色：#333；
文字装饰：无；
}
#leftcolumn ul.leftmenu li a:悬停{
颜色：#FA7837；
}
#leftcolumn ul.leftmenu li#activemenu a{
颜色：#FA7837；
}
#leftcolumn ul.leftmenu#子菜单{
保证金：3px0 3px7px；
}
#leftcolumn ul.leftmenu#子菜单a{
颜色：#333；
字体大小：正常；
字体大小：14px；
文字装饰：无；
线高：1.3em；
}
#leftcolumn ul.leftmenu#子菜单a:悬停{
颜色：#F9864D；
文字装饰：下划线；
}
#leftcolumn ul.leftmenu#子菜单{
显示：无；
}
#leftcolumn ul.leftmenu li:悬停#子菜单{
显示：块；
}
#leftcolumn ul.leftmenu#子菜单a#Active子菜单{
颜色：#F9864D；
}
















您可以使用悬停


#leftcolumn{
宽度：18%；
保证金：3倍；
填充：0；
显示：内联；
}
#leftcolumn ul.leftmenu{
列表样式：无；
文本对齐：左对齐；
利润率：0.5px3px10px；
填充：0px；
}
#leftcolumn ul.leftmenu li{
边框底部：1px实心#EFF0F1；
字体大小：14px；
填充：1px0px；
}
#leftcolumn ul.leftmenu li a{
线高：20px；
颜色：#333；
文字装饰：无；
}
#leftcolumn ul.leftmenu li a:悬停{
颜色：#FA7837；
}
#leftcolumn ul.leftmenu li#activemenu a{
颜色：#FA7837；
}
#leftcolumn ul.leftmenu#子菜单{
保证金：3px0 3px7px；
}
#leftcolumn ul.leftmenu#子菜单a{
颜色：#333；
字体大小：正常；
字体大小：14px；
文字装饰：无；
线高：1.3em；
}
#leftcolumn ul.leftmenu#子菜单a:悬停{
颜色：#F9864D；
文字装饰：下划线；
}
#leftcolumn ul.leftmenu#子菜单{
显示：无；
}
#leftcolumn ul.leftmenu li:悬停#子菜单{
显示：块；
}
#leftcolumn ul.leftmenu#子菜单a#Active子菜单{
颜色：#F9864D；
}
















正如您特别提到的使用“单击”事件：

您更正的HTML（只有
元素是
或
元素的有效子元素）：


创建/读取/操作








和其他CSS：

/* to emulate the 'feel' of the other <a> elements: */
label {
    cursor: pointer;
}

/* move the checkbox outside of the visual field to hide it: */
li input[id][type="checkbox"] {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

/* styling <div> elements with an [id] attribute that are a subsequent
   sibling of an <input> with an [id]: */
input[id] ~ div[id] {
    display: none;
}

/* styling the subsequent sibling <div> element of a :checked <input>
   that has an [id]: */
input[id]:checked ~ div[id] {
    display: block;
}

/*模仿对方的“感觉”

这利用了
元素、类型
checkbox
和
radio
的能力来保存
：hover
事件之外的状态，并使用
：checked
伪类根据该状态设置元素样式

将相关的
元素带到
中，然后允许使用通用同级组合符（
~
）根据复选框的状态（
：checked
/unchecked））将该
作为目标。
正如您特别提到的使用“click”事件：

Check Out this, This is will work. use,
    <li><a href="#" onclick="enableDiv();">Create/Read/Manipulate</a></li>   

                      <style>
                        #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;
                    }
                    </style>
                    <script>
                    function enableDiv()
                    {
                         var e = document.getElementById("submenu");
                           if(e.style.display == 'block')
                              e.style.display = 'none';
                           else
                              e.style.display = 'block';
                    }
                    </script>
                    <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="#"  
                                           onclick="enableDiv();">Create/Read/Manipulate</a></li>
                                <div id="submenu" style="display:none;"> 
                                    <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="#">How To Write</a></li>
                                    </ul>
                        </td>
                      </tr>
                    </table>

您更正的HTML（只有
元素是
或
元素的有效子元素）：


创建/读取/操作








和其他CSS：

/* to emulate the 'feel' of the other <a> elements: */
label {
    cursor: pointer;
}

/* move the checkbox outside of the visual field to hide it: */
li input[id][type="checkbox"] {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

/* styling <div> elements with an [id] attribute that are a subsequent
   sibling of an <input> with an [id]: */
input[id] ~ div[id] {
    display: none;
}

/* styling the subsequent sibling <div> element of a :checked <input>
   that has an [id]: */
input[id]:checked ~ div[id] {
    display: block;
}

/*模仿对方的“感觉”

这利用了
元素、类型
checkbox
和
radio
的能力来保存
：hover
事件之外的状态，并使用
：checked
伪类根据该状态设置元素样式

将相关的
元素放入
中，然后允许基于复选框的状态（
：checked
/unchecked）使用通用同级组合符（
~
）以该
为目标。
检查此项，这将起作用。使用
Check Out this, This is will work. use,
    <li><a href="#" onclick="enableDiv();">Create/Read/Manipulate</a></li>   

                      <style>
                        #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;
                    }
                    </style>
                    <script>
                    function enableDiv()
                    {
                         var e = document.getElementById("submenu");
                           if(e.style.display == 'block')
                              e.style.display = 'none';
                           else
                              e.style.display = 'block';
                    }
                    </script>
                    <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="#"  
                                           onclick="enableDiv();">Create/Read/Manipulate</a></li>
                                <div id="submenu" style="display:none;"> 
                                    <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="#">How To Write</a></li>
                                    </ul>
                        </td>
                      </tr>
                    </table>


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

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