Question

我目前正致力于this site的菜单系统。

我有以下代码，工作正常：

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

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

我只是隐藏所有菜单项以稍微清理导航。我现在要做的是让浏览器检测您当前正在查看的部分（即，如果您在最新工作下查看Magda）并自动显示该部分。我不太清楚如何解决这个问题。也许会检测到网址，然后在#menu .container中找到该网址，并在加载时找到所有兄弟姐妹的.show()任何人都可以帮忙吗？

Answer 1

$("#menu a").each(function() {
  if($(this).attr('href') == window.location.href) {
    //Show the menu.
  }
});

但是，您必须填写实际显示菜单的位。如果您需要帮助，请告诉我。

我在Chrome Javascript控制台中对其进行了简要测试，似乎找到了正确的元素。但请务必在多个浏览器中对其进行测试。我认为这也依赖于每个链接中的href元素是一个“完整”的URL，包括http://和域名。如果它们是相对链接（例如/home），则您需要使用window.location.pathname而不是window.location.href。

Answer 2

您可以使用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>

然后使用jQuery：

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

如果菜单是自动使用PHP打印的，则可以轻松实现。

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

Answer 3

我看到你在每个页面的section-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>

我的工作答案需要哪些。如果可以的话，它可能是一种更好的编码方式，因为它是一个父子菜单系统。

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

3 个答案: