纯CSS下拉菜单点击隐藏还是显示div？答案

【问题标题】：Pure CSS dropdown menu click to hide or show div?纯CSS下拉菜单点击隐藏还是显示div？
【发布时间】：2014-12-23 18:01:41
【问题描述】：

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

【问题讨论】：

代码片段用于将代码放在这里，这样即使是版本化的。不要使用 jsFiddle。
您不应将div 用作ul 的直接子代。而是将div.submenu 保留在子菜单的父级li 中。只有li 应该是ul 和ol 的直接子代
请不要更新问题只是次要原因使用 sn-p 编辑器而不是 jsfiddle。这不是问题吗。请。
好吧，我放弃@user1153551。别担心。我没有编辑它。
您应该将相关代码放在问题中，以便它可以独立存在。 meta.stackexchange.com/questions/114942/…

标签： javascript html css

【解决方案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>

【讨论】：

我无法将我的 </li> 元素移动到 </div> 元素的末尾。请
@user1153551 您不能在<ul> 中直接包含<div>，这是无效 HTML！！！
@user1153551 看看这个可能是jsfiddle.net/praveenscience/zr9km0Lv/4
@user1153551 你还想要什么？
感谢@praveen 的帮助，我是独一无二的，所以我要更改设置类并查看我的 jsfiddle 代码，请以您可能的好方法制作，非常感谢。 jsfiddle.net/zr9km0Lv/7

【解决方案2】：

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

您已更正的 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>，然后允许使用通用兄弟组合器（~）根据状态（:checked/unchecked）定位<div>复选框。

【讨论】：

我认为 OP 无法更改 HTML。但是很好的方法。 :)
存在这种风险，但我认为他需要更改 HTML（如果没有其他原因，无效的 HTML 在 JavaScript 中很脆弱）。谢谢！这也是使用“点击”事件来维护状态/状态更改的唯一方法，据我所知，在纯 CSS 中，您已经介绍了 :hover 方法:)
在这里检查我的：jsfiddle.net/praveenscience/zr9km0Lv/8 我刚刚用你的技术做了。纯无效的 HTML！ :P
我确实说过“在 JavaScript 中”;) 但我很反感 HTML 在 CSS 中被完全容忍:(

【解决方案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`

【讨论】：

【解决方案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>

【讨论】：

你知道Pure CSS是什么意思吗？
如果这可能是纯 css 或 javascript 欢迎 bt 我最优先考虑 css 没关系。但这意味着 JavaScript 不允许。
@Praveen Kumar 你在评论中说我不想使用 jQuery，只欢迎 CSS 或 JavaScript。
@Praveen Kumar，很好，但请尝试以某种方式教育人，即使他发布了错误的答案。谢谢
@Praveen Kumar.. 没问题，伙计，不用担心，不要道歉，只是一次谈话:)

查看演示jsFiddle

查看演示jsFiddle

查看演示`jsFiddle`

查看演示`jsFiddle`