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

Question

我有这个 javascript Accordion (.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; }

感谢您的帮助。

编辑:

这是我在

中输入的javascript脚本

 <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 的直接子元素。