UL 标签显示的 css 与 OL 不同

Question

我有这个javascript手风琴（.heading），我正在尝试将其应用于无序列表（第一个"ul"标签）。奇怪的是，格式（主要集中在悬停颜色上）适用于有序列表，而不是"ul"标签。

.HTML

<h3><a></a></h3>
  <div>
    <ul>
    <li class="heading"></li>
    <ul class="content">
            <li></li>
            <li></li>
            <li></li>
        </ul>   
    <li></li>   
    </ul>
  </div> 

.CSS

.heading {
margin: 1px;
color: black;
padding: 3px 10px;
cursor: pointer;
position: relative;
font-weight: bold;
}
.heading:hover{
margin: 1px;
color: black;
padding: 3px 10px;
cursor: pointer;
position: relative;
font-weight: bold;
background:#cccccc
}
.content {
padding: 5px 10px;
}
p { padding: 5px 0; }

感谢您的任何帮助。

编辑：

这是我在

 <script type="text/javascript">
jQuery(document).ready(function() {
 jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});
</script>

Answer 1

您的列表嵌套不正确。嵌套列表需要位于 li 元素内，而不是作为第一个ul的直接子级。

Answer 2

你标记的HTML是错误的，即使它对你来说是"功能性的"。

阅读：http://en.wikipedia.org/wiki/Semantic_HTML

从这个链接学习：

http://dev.w3.org/html5/markup/ul.html

这个链接是这样说的：

允许的内容

零个或多个锂元素

换句话说，不允许其他元素直接进入<UL>或<OL>，除非<LI>。

您必须将<UL class="content">（或<OL class="content">）添加到另一个<LI>中。

为了更好地了解你，你应该做的是这样的：

<style>
li.heading {
    margin: 1px;
    color: black;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
}
li.heading:hover{
    margin: 1px;
    color: black;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    background:#cccccc;
}
li.content ul {
    padding: 5px 10px;
}
</style>
<ul>
<li class="heading"></li>
<li class="content">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</li>
<li></li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(this).next(".content").slideToggle(500);
    });
});
</script>