jQuery根据页面切换活动菜单项

我目前正在为的菜单系统工作

我有以下代码，运行良好：

$('#menu .container ul li:not(:first-child)').fadeOut()

$('#menu .container ul li:first-child').click(function() {
    $(this).siblings().fadeToggle();
})

---

我只是隐藏了所有的菜单项来清理一下导航。我现在想做的是让浏览器检测您当前正在查看的部分（即如果您正在查看Magda的最新作品），并自动显示该部分。我不太清楚该怎么办。可能检测到URL，然后在加载时在

#menu.container

和

.show（）

中找到该URL的所有同级？有人能帮上忙吗？

您可以使用PHP为元素添加特定的类，然后使用jQuery查找元素并显示它

例如：

<ul>
<li class="<?=($page_1 == $selected_page ? "active" : "");?>">Page 1</li>
<li class="<?=($page_2 == $selected_page ? "active" : "");?>">Page 2</li>
<li class="<?=($page_3 == $selected_page ? "active" : "");?>">Page 3</li>
</ul>

如果菜单是用PHP自动打印的，那么它就很容易实现

---

其他方法-首先不要隐藏所选菜单，因此它会立即展开：）

您可以使用PHP为元素添加特定类，然后使用jQuery查找元素并显示它

例如：

<ul>
<li class="<?=($page_1 == $selected_page ? "active" : "");?>">Page 1</li>
<li class="<?=($page_2 == $selected_page ? "active" : "");?>">Page 2</li>
<li class="<?=($page_3 == $selected_page ? "active" : "");?>">Page 3</li>
</ul>

如果菜单是用PHP自动打印的，那么它就很容易实现

其他方法-首先不要隐藏所选菜单，因此它会立即展开：）

不过，您必须填写实际显示菜单的部分。如果你也需要帮助，请告诉我

我在Chrome Javascript控制台中对其进行了简要测试，似乎找到了正确的元素。不过，一定要跨多个浏览器进行测试。我认为这还取决于每个链接中的

href

元素是一个“完整”URL，包括

http://

和域名。如果它们是相对链接（例如，

/home

），则需要使用

window.location.pathname

，而不是

window.location.href

不过，您必须填写实际显示菜单的部分。如果你也需要帮助，请告诉我

---

我在Chrome Javascript控制台中对其进行了简要测试，似乎找到了正确的元素。不过，一定要跨多个浏览器进行测试。我认为这还取决于每个链接中的

href

元素是一个“完整”URL，包括

http://

和域名。如果它们是相对链接（例如，

/home

），您将希望使用

window.location.pathname

而不是

window.location.href

，我看到您在每页的第n节都有一个body类。如果可以将类应用于每个父菜单项的ul，则可以使用

.menuparent ul { display: none; }
.bodyclass .menuparent ul { display: block; }

--编辑--

只是看到它不是这样编码的：

<ul>
  <li class="menuparent">menu parent
    <ul>
      <li>menu sub 1</li>
      <li>menu sub 2</li>
    </ul>
  </li>
</ul>

菜单父项

菜单子1
菜单子2

---

这是我的答案发挥作用所必需的。如果可以的话，这可能是一种更好的编码方式，因为它是一个父子菜单系统。

我看到你在每一页的第n部分都有一个body类。如果可以将类应用于每个父菜单项的ul，则可以使用

.menuparent ul { display: none; }
.bodyclass .menuparent ul { display: block; }

--编辑--

只是看到它不是这样编码的：

<ul>
  <li class="menuparent">menu parent
    <ul>
      <li>menu sub 1</li>
      <li>menu sub 2</li>
    </ul>
  </li>
</ul>

菜单父项

菜单子1
菜单子2

---

这是我的答案发挥作用所必需的。如果可以的话，这可能是一个更好的编码方式，因为它是一个父子菜单系统。

这非常有效。我添加了

$（this.parent（）.parent（）.children（）.show（）

使菜单功能正常工作，并且它是实时的！非常感谢。我认为所有其他的建议也会起作用，但这是最容易做到的，不需要重新编码所有内容。谢谢。这个很好用。我添加了

$（this.parent（）.parent（）.children（）.show（）

使菜单功能正常工作，并且它是实时的！非常感谢。我认为所有其他的建议也会起作用，但这是最容易做到的，不需要重新编码所有内容。谢谢