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

这就是它的样子：

enter image description here

这是创建列表的代码：

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

Answer 3

鉴于<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。

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

3 个答案: