如何使用 jQuery 和 CSS 使側邊欄菜單和子菜單突出顯示 onClick

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 使側邊欄菜單和子菜單突出顯示 onclick 誰能幫幫我

Answer 1

 $(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>

Answer 2

.removeClass()和.addClass()基於您的點擊。 如果您想與父.closest()一起突出顯示，請使用.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>