javascript - 当子菜单的父项或包含的链接处于事件状态时，如何让子菜单可见？

Question

我有一个 HTML 菜单，它看起来像这样:

<nav>
 <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
      <ul>
        <li><a href="#">Team</a></li>
        <li><a href="#">Philosophy</a></li>
        <li><a href="#">History</a></li>
      </ul>
   </li>
   <li><a href="#">Projects</a></li>
   <li><a href="#">Services</a>
      <ul>
         <li><a href="#">Our Service</li>
         <li><a href="#">Special Offers</a></li>
      </ul>
   </li>
   <li><a href="#">Contact</a></li>
 </ul>
</nav>

除一件事外，一切都通过 CSS 进行调整:当其父列表项的链接指向与当前页面地址相同的地址时，让子菜单出现。

我知道这是可能的。但我确实是 JavaScript 或 jQuery 或 PHP 方面最棒的菜鸟(我认为最后两个意思是一样的，对吧？)。

我尝试复制和粘贴代码片段，例如“OnClick=...”和类似“”的代码片段，或者我发现包含“GetElenentbyTagName”的代码片段(几乎可以工作...)但除此之外我没有真正的代码片段关于把它们放在哪里的线索。他们只是没有正常工作或根本没有工作。我有一个完整的代码片段，但是当我粘贴它并替换一些标签名称时，它都被标记为红色，并且在尝试让它工作一整天后我的头在燃烧。

我认为这是可能的，因为我看到的事情似乎在描述我想做的事情的一部分。例如

脚本片段应该是

• 选项 A:告诉浏览器，如果用户所在的页面与菜单中的链接地址相同，则 href-address 是子菜单 (ul li ul) 或菜单 (ul ) 本身包含在其中的地方，应该得到“visiblity:visible”。

• 选项 B: 脚本代码类似于“如果用户单击菜单项 (ul li)，则它是子菜单 (ul li ul)，如果它有一个，或者如果被单击的菜单项是子菜单之一，则此子菜单应变为“visibility:visible”。如果单击的元素没有子菜单，则不应显示任何子菜单。

不过，HTML 代码不能直接在 (nav) 和 (/nav) 之间的任何位置包含类或其他属性。

Answer 1

我不确定我是否理解你的需求，

当用户转到某个菜单页面时，您需要它获取 url 并激活菜单上的链接，直到用户进入该页面，对吗？

如果是这样的话，

我认为这样的事情应该可行:

<script type='text/javascript'>
    $(function(){
        $item = $('ul li a').filter(function(){
            return $(this).prop('href').indexOf(location.pathname) != -1;
        });
        $item.css('visibility','visible'); //or whatever ur using to active it.
    });
</script>