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

Question

我做了以下。我想点击列表项来切换下一个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。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用悬停。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如您特别提到的使用＆＃39;点击＆＃39;事件：

您更正后的HTML（仅<li>个元素是<ul>或<ol>元素的有效子元素）：

<li>
    <input id="demo" type="checkbox" />
    <label for="demo">Create/Read/Manipulate</label>
    <div id="submenu"> <a href="#">DOM</a>

        <br /> <a href="#">Reader/Writer</a>

        <br /> <a href="#">SimpleXML</a>

        <br />
    </div>
</li>

还有其他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;
}

JS Fiddle demo

这使用<input />元素checkbox和radio类型的功能来保留:hover事件之外的状态，并使用:checked伪类来基于该状态设置元素。

将相关的<div>元素置于<li>内，然后允许使用通用兄弟组合子（~）根据状态定位<div>（{1}} :checked /未选中）复选框。

Answer 3

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

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

查看演示 jsFiddle

Answer 4

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>