时间戳

首页 > 解决方案 > 选择与 jQuery 最接近的 href 匹配？

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

问题描述

尝试使用过滤器缩小<a> hrefs到一个，jQuery然后添加标记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我仍然希望 foo 保持活跃一样。

为什么这不起作用？

标签： javascripthtmljquery

解决方案

其他方法是使用each循环，然后比较 ifurl == 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
    }
  })
});

推荐阅读