如何使嵌套的 <li> <a> 标签保持活跃和可见？

Question

我有这个网站http://firesafetyexpo.in/（我指的是左侧嵌套列表菜单）。

当我点击带有子链接的菜单（例如“关于印度消防与安全”-> 里面的任何链接）时，页面会打开，但“点击”菜单不可见。我想让整个<ul> 与子链接（<li>）一起看到。

这里是html代码：

<li class="active"><a href="index.html"><span>Welcome</span></a></li>
<li class='has-sub'><a href=""><span>About Fire & Safety India</span></a>
  <ul>
    <li><a href="pdf/Fire-Safety-Layout.pdf" target="_blank"><span>Floor plan</span></a></li>
    <li><a href="media-partners.html"><span>Support and Media Partners</span></a></li>
    <li class='last'><a href="organisers.html"><span>About Organisers</span></a></li>
  </ul>
</li>

这里是jquery代码：

  ( function( $ ) {
      $( document ).ready(function() {
      $('#cssmenu > ul > li > a').click(function() {
      $('#cssmenu li').removeClass('active');
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next();
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
          $(this).closest('li').removeClass('active');
          checkElement.slideUp('normal');
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
          $('#cssmenu ul ul:visible').slideUp('normal');
          checkElement.slideDown('normal');
        }
        if($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;   
     }      
   });
   });
   } )( jQuery );

Answer 1

单击菜单时，整个页面都会刷新，从而使 HTML 也刷新。这样一来，您使用 JavaScript 完成的所有 DOM 操作都将丢失。无论是添加特定类还是删除元素。

解决问题的一种方法是使整个应用程序成为 SPA（单页应用程序）。但我不相信再次编写整个网站是值得的。

您在这里可以做的最简单的事情可能就是获取 URL 并在您的域名之后获取子字符串。您的所有 HTML 元素都应具有与您的路由相同的 ID。这样，您可以简单地选择与您的 URL 子字符串具有相同 ID 的元素并添加类 active。

---编辑---

好的，首先我会告诉你我在浏览你的网站时看到的一些事情。导航中的大多数链接什么都不做。如果您不需要它们，请删除它们...

您可以轻松地在文件夹中组织您的 html 文件。例如，您将拥有一个存储所有 .html 文件的主文件夹。 index.html 直接在里面。在index.html 旁边创建文件夹about 并放置从导航中的“关于”选项卡调用的所有.html 文件。

这样您的网址将类似于http://firesafetyexpo.in/about/media-partners.html

修复导航中的href（例如href=about/media-partners.html）。

为导航中的所有主要标签添加 ID。 （<li id="about" class='has-sub'><a href=""><span>About Fire & Safety India</span></a>（你不需要 在这里......这取决于你。你会得到与 <li id="about" class='has-sub'><a href="">About Fire & Safety India</a> 相同的结果）。

最后将此函数添加到您的 JavaScript 文件中。

$(function() {
    $('#cssmenu a#' + location.pathname.split("/")[1]).addClass('active');
});

我没有尝试过这段代码。我真的希望它有效（：