Question

这是我的代码：我想要这样一种方式：当我单击子链接时，该链接变为活动状态，而父链接也处于活动状态。我将css类.active用于主菜单和子菜单的活动类。

下面的JS代码段有效，但仅适用于没有子菜单的菜单

$(document).ready(function($) {
  var url = window.location.href;
  var activePage = url;
  $('.menu li a').each(function() {
    var linkPage = this.href;

    if (activePage == linkPage) {
      $(this).closest("li").addClass("active");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul class="list">
    <li class="header">MAIN NAVIGATION</li>
    <li class="">
      <a href="index.php">
        <i class="material-icons">home</i>
        <span>Dashboard</span>
      </a>
    </li>
    <li>
      <a href="sell.php">
        <i class="material-icons">receipt</i>
        <span>Sell</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="material-icons">show_chart</i>
        <span>Reporting</span>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);" class="menu-toggle">
        <i class="material-icons">apps</i>
        <span>Products</span>
      </a>
      <ul class="ml-menu">
        <li>
          <a href="add-product.php">Add Product</a>
        </li>
        <li>
          <a href="products.php">All Products</a>
        </li>
        <li>
          <a href="add-category.php">Add Category</a>
        </li>
        <li>
          <a href="categories.php">All Categories</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<!-- #Menu -->

Answer 1

为您的锚标签实现一个mousedown事件监听器，传递每个锚标签的ID，并使用parentElement属性获取元素的父级。

document.getElementById("myLI").parentElement.nodeName;

Answer 2

您可以尝试以下JS代码：

   group_id      group_name    count
0   48299      e_sys              4
1   50774      Y3N                1
2   64865      nana               2
3   48865      juzti              3

以及Active链接的CSS：

$(document).ready(function () {
        $('a').click(function () {
            //removing the previous selected menu state
            $('.menu').find('li.active').removeClass('active');
            //adding the state for this parent menu
            $(this).parents("li").addClass('active');

        });
    });

希望有帮助...

我想在其子级处于活动状态时使父级导航链接侧边栏处于活动状态（当前页面）

2 个答案: