Question

假设我有一个深度为4到5级的菜单。在大多数情况下，选择菜单会打开相同的菜单。这是一些html：

<div class="container">
   <div class="trigger">Click Here</div>
   <div class="menu">
      <ul>
         <li>
            <a href="blah.aspx">Main</a>
            <ul>
                <li>
                   <a href="blah1.aspx">First</a>
                   <ul>
                      <li>
                          <a href="blah3.aspx">Third</a>
                          <ul>
                              <li>
                                 <a href="blah5.aspx">Five</a>
                              </li>
                              <li>
                                 <a href="blah6.aspx">Six</a>
                              </li>
                          </ul>
                      </li>
                      <li>
                          <a href="blah4.aspx">Fourth</a>
                      </li>
                   </ul>
                </li>
                <li>
                   <a href="blah2.aspx">Second</a>
                </li>
           </ul>
      </ul>
   </div>
</div>

如何点击“第三个”，然后转到该页面，当您到达该页面并再次点击菜单时，它将打开显示“第三个”标题在它的孩子的顶部，而不是像往常一样打开它？

Answer 1

如果页面已加载（在踢完链接后）

您需要首先指明哪个页面已加载，例如：blah3.aspx或blah4.aspx

然后，为了重新排列列表，你必须获得应该在顶层菜单上显示的列表项的html内容。

<div class="menu">
      <ul>
         <li>
            <a href="blah.aspx">Main</a>
            <ul>
                <li>
                   <a href="blah1.aspx">First</a>
                   <ul>
                      <li id="page3">
                          <a href="blah3.aspx">Third</a>
                          <ul>
                              <li>
                                 <a href="blah5.aspx">Five</a>
                              </li>
                              <li>
                                 <a href="blah6.aspx">Six</a>
                              </li>
                          </ul>
                      </li>
                      <li>
                          <a href="blah4.aspx">Fourth</a>
                      </li>
                   </ul>
                </li>
                <li>
                   <a href="blah2.aspx">Second</a>
                </li>
           </ul>
      </ul>
   </div>

此处示例如果已加载第3页：

获取内部HTML内容：

var treeStructure = $("#page3").html;

使用jQuery remove方法从列表中删除列表项：

$("#page3").remove();

使用jQuery prepend方法将保存的内容添加到列表的开头：

$(".menu ul").prepend("<li>" + treeStructure + "</li>");

在当前链接上打开菜单

1 个答案: