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; }

感谢您的帮助。

编辑：

这是我在

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

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>

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

2 个答案: