php - 动态垂直菜单问题

Question

我希望所有动态生成的 php 链接都像下面的示例 1 中那样显示，当我点击一个链接时我到另一个页面，它的所有子链接都显示在示例 2 中，当我单击其中一个链接时，它的所有子链接链接的显示方式与其他示例中的一样。

如果有帮助，我正在为我的网站使用 PHP、MySQL 和 Jquery。

示例 1

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

示例 2

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

示例 3

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

示例 4

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

Answer 1

I want all my dynamic generated php links to be displayed like in example 1 below and when I click on a link which takes me to another page all its sub links are displayed like in example 2 and when I click on one of those links all its sub links are displayed like in the rest of the examples.

粗体部分不是很清楚。

all my dynamic generated php links

它是如何动态生成的？通过 Ajax ？请进一步说明。

takes me to another page all its sub links are displayed

如果单击一个链接会将您带到另一个页面，那么应该在服务器端显示子链接。是的，您可以通过 jQuery 在客户端执行此操作，但我认为这不切实际。

总结。

使用您的 php 来显示您的子链接。

HTML

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul class="active"> <!-- active UL -->
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

CSS

ul.active ul {
    display: none;
}

如上所述，使用您的 php 技能向 ul 添加/删除事件类。通过这样做，并根据您的 CSS 定义，事件 ul 中的任何 ul 都不可见。在上面，Fourth Nested List 将不会显示在页面上。

---

更新

ul ul {
    display: none;
}
ul.active {
    display: block; /* or display:inline; */
}

例子

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>  <!-- this will be hidden and all it's sub ul -->
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
      <ul class="active"> <!-- active UL, this will be displayed on the browser -->
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul class="active"> <!-- this will be shown if it's closest parent ul is active also -->
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>  <!-- this will be hidden and all it's sub ul -->
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>