javascript - UL 标签不显示与 OL 相同的 css

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元素内，而不是作为 first 的直接子元素ul。

Answer 2

您标记 HTML 是错误的，即使它对您来说是“功能性的”。

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

从此链接学习：

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

这个链接是这样说的：

允许的内容

零个或多个 li 元素

换句话说，其他元素是不允许直接在里面<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>