选择与 jQuery 最接近的 href 匹配？

Question

尝试使用jQuery 过滤器将<a> hrefs 缩小到一个，然后添加标签active 类。
我这样做是因为我从侧边栏子菜单被重定向并且希望仍然保持侧边栏菜单打开。

$(document).ready(function () {
  var url = window.location;


  $('ul.treeview-menu a').filter(function () {
      return url.indexOf(this.href) > -1;
  }).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
    <li class="header">General</li>
    <li class="home"><a href="/p/index.php"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></a></li>

    <li class="header">Data Managment</li>
    <li class="treeview">
        <a href="#">p <span>Tree</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
            <li><a href="/p/pages/foo.php">foo</a></li>
            <li><a href="/p/pages/bar.php">bar</a></li>
            <li><a href="/p/pages/blah.php">blah</a></li>
            <li><a href="/p/pages/blahh.php">blahh</a></li>
        </ul>
    </li>
    
    <li class="treeview">
        <a href="#"></i> <span>Tree 2</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
            <li><a href="/p/pages/aaa.php">aaa</a></li>
            ...
        </ul>
    </li>

</ul>

如果我在foo 和href 中被重定向，就像/p/pages/foo.php/new.php 我仍然想保持活跃。

为什么这不起作用？

Answer 1

其他方法是使用each 循环，然后比较url == this.href 如果是，则将类添加到该li 并打开最近的ul。

演示代码：

$(document).ready(function() {
  //just for demo...
  var url = 'https://stacksnippets.net/p/pages/bar.php';
  $('ul.treeview-menu a').each(function() {
    //if full url is not same with li use indexof else if http://...also there in href of a tag use below..
    if (url == this.href) {
      $(this).addClass('active') //add class active to `a`
      $(this).closest("ul").slideDown(); //slide ul tag where `li` is active
    }
  })
})

.treeview-menu {
  display: none
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">General</li>
  <li class="home"><a href="/p/index.php"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></a></li>

  <li class="header">Data Managment</li>
  <li class="treeview">
    <a href="#">p <span>Tree</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
    <ul class="treeview-menu">
      <li><a href="https://stacksnippets.net/p/pages/foo.php">foo</a></li>
      <li><a href="https://stacksnippets.net/p/pages/bar.php">bar</a></li>
      <li><a href="https://stacksnippets.net/p/pages/blah.php">blah</a></li>
      <li><a href="https://stacksnippets.net/p/pages/blahh.php">blahh</a></li>
    </ul>
  </li>

  <li class="treeview">
    <a href="#"> <span>Tree 2</span>
      <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="https://stacksnippets.net/p/pages/aaa.php">aaa</a></li>
      ...
    </ul>
  </li>

</ul>

更新代码：

$(window).on('load', function() {
  var url = window.location.href;
  var new_url = url.slice(url.lastIndexOf('/') + 1);
  $('ul.treeview-menu a').each(function() {
    var res = this.href.replace(".php", "");
    var href = res + "/" + new_url;
    if (href == url) {
      $(this).parent().addClass('active') //add class active to `a
      $(this).closest("ul").slideDown(); //slide ul tag where `li` is active
    }
  })
});