純CSS下拉菜單單擊以隱藏還是顯示div？

Question

我做了以下。 我想單擊列表項以切換下一個div。

JSFiddle演示

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

Answer 1

您可以使用懸停。

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

Answer 2

正如您特別提到的使用'click'事件：

更正后的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小提琴演示 。

這利用了<input />元素， checkbox和radio類型的能力來保存:hover事件之外的狀態，並使用:checked偽類基於該狀態來設置元素樣式。

將相關的<div>元素放入<li>內，然后允許使用通用同級組合器（ ~ ）基於復選框的狀態（ :checked / unchecked）定位該<div> 。

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>