javascript - 如何正确构建具有许多子级别的列表

Question

我有一个使用 li 和 ul 标签制作的大型导航菜单。我遇到的问题是，如果我尝试为单个项目设置样式，这将变得非常具有挑战性，因为每个 li 标签中都有多个 ul 和 li 元素，因此样式会应用于其中的所有内容。例如，我试图突出显示第一个列表项“SharePoint 演示网站”，但第一项包含所有其他项，它是一个可展开/可折叠的菜单）。

HTML：

<ul id="expList" class="list">
    <li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">Sharepoint Demo Website
        <ul style="display: block;">
            <li title="Academic" value="https://demo.ca/academic" class="collapsed">Academic
                <ul style="display: none;">
                    <li title="Board Meetings" value="https://demo.ca/academic/bm">Board Meetings</li>
                    <li title="Committee" value="https://demo.ca/academic/cmtte">Committee</li>
                    <li title="Document Management" value="https://demo.ca/academic/dm">Document Management</li>
                    <li title="Project Management" value="https://demo.ca/academic/pm">Project Management</li>
                </ul>
            </li>
            <li title="Archive" value="https://demo.ca/archive">Archive</li>
            <li title="Associations" value="https://demo.ca/associations" class="collapsed">Associations
                <ul style="display: none;">
                    <li title="Board Meetings" value="https://demo.ca/associations/bm">Board Meetings</li>
                    <li title="Document Management" value="https://demo.ca/associations/dm">Document Management</li>
                    <li title="Project Management" value="https://demo.ca/associations/pm">Project Management</li>
                </ul>
            </li>
            <li title="Developer" value="https://demo.ca/cdn">Developer</li>
            <li title="Person test" value="https://demo.ca/cf_test">Person test</li>
            <li title="Charity" value="https://demo.ca/charity" class="collapsed">Charity
                <ul style="display: none;">
                    <li title="Board of Directors" value="https://demo.ca/charity/bod" class="collapsed">Board of Directors
                        <ul style="display: none;"><li title="Board Documents" value="https://demo.ca/charity/bod/boarddocs">Board Documents</li>
                            <li title="Meeting Materials" value="https://demo.ca/charity/bod/mtgmaterial">Meeting Materials</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li title="demo" value="https://demo.ca/clite" class="collapsed">demo
                <ul style="display: none;"><li title="administrator" value="https://demo.ca/clite/admin">administrator
                </li>
            </ul>
        </li>
        <li title="Company" value="https://demo.ca/company" class="collapsed">Company
            <ul style="display: none;"><li title="Finance" value="https://demo.ca/company/finance">Finance</li>
                <li title="Human Resources" value="https://demo.ca/company/hr" class="collapsed">Human Resources

                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

    #expList ul li:hover{
    background-color: #eee;
}

这是它的样子：

这是创建列表的代码：

function traverseMap(obj, element) {
      for (var key in obj) {
          var item = obj[key];

          var li = $('<li>', {
                  text: item.title,
                  title: item.title,
                  value: item.url
              }).appendTo(element);

          if (!$.isEmptyObject(item.children)) {
              var ul = $('<ul>').appendTo(li);
              traverseMap(item.children, ul);
          }
      }
  }
  traverseMap(map, $('#expList'));
}

Answer 1

您可以使用>仅影响直接子级，如下所示：

#expList ul > li:hover{
    background-color: #eee;
}

或这个：

#expList > ul > li:hover{
    background-color: #eee;
}

或:first-child仅对第一个孩子使用伪选择器：

#expList ul li:first-child:hover
{ 
    background-color:yellow;
}

取决于你想要什么。您也可以使用类名。

Answer 2

鉴于它<li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">包含一个文本节点和子元素，设置样式的规则li也将适用于它的子元素。

如果您想独立设置文本节点（“Sharepoint 演示网站”）的样式，则必须将其包装在您可以专门定位的元素中。

<ul id="expList" class="list">
  <li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">
    <span>Sharepoint Demo Website</span>
    <ul style="display: block;">
      <li title="Academic" value="https://demo.ca/academic" class="collapsed">Academic
        <ul style="display: none;">

您现在可以通过span

#expList li > span {
  background-color:#fee;
}

见jsfiddle。

Answer 3

你现在的方式是行不通的，因为整个节点都会被突出显示，你需要做的是给你想要突出显示的文本一个额外的标记，例如：

<li title="Academic" value="https://demo.ca/academic" class="collapsed">
<span>Academic</span>
     <ul style="display: none;">
          <li title="Board Meetings" value="https://demo.ca/academic/bm">Board Meetings</li>
          <li title="Committee" value="https://demo.ca/academic/cmtte">Committee</li>
          <li title="Document Management" value="https://demo.ca/academic/dm">Document Management</li>
          <li title="Project Management" value="https://demo.ca/academic/pm">Project Management</li>
      </ul>
 </li>

然后 ：

#expList ul > li:hover > span{
    background-color: #eee;
}