Как сделать так, чтобы боковое меню и подменю выделялись при нажатии jQuery и CSS

Question

<div id="sidebar" class="sidebar">
   <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
      <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: auto; height: 100%;">
         <ul class="nav">
            <li class="has-sub">
               <a href="#"> <span>Home</span></a>
            </li>
            <li class="has-sub expand">
               <a href="javascript:;"> <b class="caret"></b> <span>Accounts</span> </a>
               <ul class="sub-menu">
                    <li><a class="load" href="#">Agent Creation</a></li>
                    <li><a class="load" href="#">Customer  Create</a></li>
                    <li><a class="load" href="#">Customer FD Create</a></li>
                    <li><a class="load" href="#">Customer RD Create</a></li>
                    <li><a class="load" href="#">Partner Create</a></li>
                    <li><a class="load" href="#">Partner FD Create</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
</div>

Как сделать так, чтобы боковое меню и подменю подсвечивались с помощью Jquery и CSS, может кто-нибудь мне помочь

Answer 1

.removeClass() и .addClass() в зависимости от вашего клика. Если вы хотите выделить вместе с родителями, используйте .closest().

$('ul > li> a').on('click', function() {
  $('ul > li> a').removeClass('highlight')
  $(this).addClass('highlight');
  $(this).closest('ul').closest('li').find('a:eq(0)').addClass('highlight');

});

.highlight {
  background: #d3d3d3;
  border-radius: 10px;
  padding: 0px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="sidebar" class="sidebar">
  <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
    <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: auto; height: 100%;">
      <ul class="nav">
        <li class="has-sub">
          <a href="#"> <span>Home</span></a>
        </li>
        <li class="has-sub expand">
          <a href="javascript:;"> <b class="caret"></b> <span>Accounts</span> </a>
          <ul class="sub-menu">
            <li><a class="load" href="#">Agent Creation</a></li>
            <li><a class="load" href="#">Customer  Create</a></li>
            <li><a class="load" href="#">Customer FD Create</a></li>
            <li><a class="load" href="#">Customer RD Create</a></li>
            <li><a class="load" href="#">Partner Create</a></li>
            <li><a class="load" href="#">Partner FD Create</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

$(function() {
  $('.nav>li>a, .sub-menu>li>a').click(function(item) {
    $('.nav>li, .sub-menu>li').removeClass('active');
    $(this).parent().addClass('active');
  });
});

.nav,
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-menu {
  padding-left: 5px;
}

.nav>li.active>a,
.sub-menu>li.active>a {
  background: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="sidebar" class="sidebar">
  <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
    <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: auto; height: 100%;">
      <ul class="nav">
        <li class="has-sub">
          <a href="#"> <span>Home</span></a>
        </li>
        <li class="has-sub expand">
          <a href="javascript:;"> <b class="caret"></b> <span>Accounts</span> </a>
          <ul class="sub-menu">
            <li><a class="load" href="#">Agent Creation</a></li>
            <li><a class="load" href="#">Customer  Create</a></li>
            <li><a class="load" href="#">Customer FD Create</a></li>
            <li><a class="load" href="#">Customer RD Create</a></li>
            <li><a class="load" href="#">Partner Create</a></li>
            <li><a class="load" href="#">Partner FD Create</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>