1

li タグと ul タグを使用して大きなナビゲーション メニューを作成しました。私が抱えている問題は、個々のアイテムのスタイルを設定しようとすると、各 li タグに複数の ul 要素と li 要素が含まれているため、スタイルがその中のすべてに適用されるため、非常に困難になることです。たとえば、最初のリスト項目「SharePoint Demo Website」を強調表示しようとしていますが、その最初の項目には他のすべての項目が含まれています。これは展開/折りたたみ可能なメニューです)。

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'));
}
4

3 に答える 3

0

ノード全体が強調表示されるため、現在の方法では機能しません。強調表示するテキストに追加のマークを付ける必要があります。たとえば、次のようになります。

<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;
}
于 2013-10-21T14:37:40.463 に答える
0

>次のように、直接の子のみに影響を与えるために使用できます。

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

あなたが望むものに応じて。クラス名を使用することもできます。

于 2013-10-21T14:35:28.333 に答える