Javascript 如何仅在导航的第二级添加活动类

我有两层的垂直导航

我想要的是，当我按下主li键时，将活动和打开类仅添加到主

li

，当我按下子菜单时，我想将活动仅添加到该

li

。这是我的密码：

HTML

<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
  <li class="start active open">
    <a href="javascript:;">
      <i class="icon-home"></i>
      <span class="title">Rezervari</span>
      <span class="arrow "></span>
    </a>
    <ul class="sub-menu">
      <li class="active">
        <a href="#">
          <i class="icon-bar-chart"></i>
          Vezi rezervari</a>
      </li>
      <li>
        <a href="#">
          <i class="icon-bulb"></i>
          Istoric rezervari</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:;">
      <i class="icon-home"></i>
      <span class="title">Rezervari</span>
      <span class="arrow "></span>
    </a>
    <ul class="sub-menu">
      <li>
        <a href="#">
          <i class="icon-bar-chart"></i>
          Vezi rezervari</a>
      </li>
      <li>
        <a href="#">
          <i class="icon-bulb"></i>
          Istoric rezervari</a>
      </li>
    </ul>
  </li>
</ul> 

---

您必须以类内最近的li为目标

。页面侧栏菜单

$(".sub-menu li").on("click", function() {
      $(".sub-menu li").removeClass("active");
      $(this).addClass("active");
});

$(".page-sidebar-menu > li").on("click", function() {
    $(".page-sidebar-menu > li").removeClass("active open");  
    $(this).addClass("active open");
});

---

我不确定我是否完全理解你的要求。 但是，从我得到的信息来看，我重新制作了一点html（添加了一个菜单类来更精确地绑定click事件）

我用来测试它的CSS是这样的：

.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }

---

例如，检查一下我回答你的问题（这里是非常基本的css），然后告诉我这是否是你要求的

几乎可以工作了，但它只添加了活动类，我需要按两下才能添加打开的类

<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
    <li class="menu start active open"> <a href="javascript:;">
                    <i class="icon-home"></i>
                    <span class="title">Rezervari</span>
                    <span class="arrow "></span>
                    </a>

        <ul class="sub-menu">
            <li class="active"> <a href="#">
                            <i class="icon-bar-chart"></i>
                            Vezi rezervari</a>

            </li>
            <li> <a href="#">
                            <i class="icon-bulb"></i>
                            Istoric rezervari</a>

            </li>
        </ul>
    </li>
    <li class="menu"> <a href="javascript:;">
                    <i class="icon-home"></i>
                    <span class="title">Rezervari</span>
                    <span class="arrow "></span>
                    </a>

        <ul class="sub-menu">
            <li> <a href="#">
                            <i class="icon-bar-chart"></i>
                            Vezi rezervari</a>

            </li>
            <li> <a href="#">
                            <i class="icon-bulb"></i>
                            Istoric rezervari</a>

            </li>
        </ul>
    </li>
</ul>

$(document).ready(function () {
    // added a menu class to bind the click event more precisely
    $(".menu > a").on("click", function () {
        // nothing is active but this
        $(".active").removeClass("active");
        // and close the other menus
        $(".menu").removeClass("open");

        $(this).parent().addClass("active open");
    });

    $(".sub-menu li").on("click", function () {
        // nothing is active but this
        $(".active").removeClass("active");
        $(this).addClass("active");
    });
});

.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }