Collapse Menü öffnen und aktiv nach dem Klick

Ich habe ein Sidebar-Kollaps-Menü, Es hat Drop-Down-ebenso. wenn ich auf Dropdown klicken und auf einen Link klicke, Drop-down-Menü zusammenklappt. Ich möchte offen bleiben und Link hervorheben, bis ich auf einen anderen Link klicke. wie kann ich es tun? irgendeine Hilfe.Collapse Menü öffnen und aktiv nach dem Klick

Bis anderen Link klicken. Ich möchte aktiv wie unten.

HTML-Code

<ul class="page-sidebar-menu page-sidebar-menu-light"> 
    <li> 
     <a href="javascript:;"> 
      <i class="icon-logout"></i> 
      <span class="title">Quick Sidebar</span> 
      <span class="arrow "></span> 

     </a> 
     <ul class="sub-menu"> 
      <li> 
       <a href="quick_sidebar_push_content.html"> 
        Push Content 
       </a> 
      </li> 
      <li> 
       <a href="quick_sidebar_over_content.html"> 
        Over Content 
       </a> 
      </li> 
      <li> 
       <a href="quick_sidebar_over_content_transparent.html"> 
       Over Content &amp; Transparent 
       </a> 
      </li> 
      <li> 
       <a href="quick_sidebar_on_boxed_layout.html"> 
        Boxed Layout 
       </a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="javascript:;"> 
      <i class="icon-envelope-open"></i> 
      <span class="title">Email Templates</span> 
      <span class="arrow "></span> 

     </a> 
     <ul class="sub-menu"> 
      <li> 
       <a href="email_template1.html"> 
        New Email Template 1 
       </a> 
      </li> 
      <li> 
       <a href="email_template2.html"> 
        New Email Template 2 
       </a> 
      </li> 
      <li> 
       <a href="email_template3.html"> 
        New Email Template 3 
       </a> 
      </li> 
      <li> 
       <a href="email_template4.html"> 
        New Email Template 4 
       </a> 
      </li> 
      <li> 
       <a href="email_newsletter.html"> 
        Old Email Template 1 
       </a> 
      </li> 
      <li> 
       <a href="email_system.html"> 
        Old Email Template 2 
       </a> 
      </li> 
     </ul> 
    </li> 
    <li class="last "> 
     <a href="javascript:;"> 
      <i class="icon-pointer"></i> 
      <span class="title">Maps</span> 
      <span class="arrow "></span> 

     </a> 
     <ul class="sub-menu"> 
      <li> 
       <a href="maps_google.html"> 
        Google Maps 
       </a> 
      </li> 
      <li> 
       <a href="maps_vector.html"> 
        Vector Maps 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul>

Quelle

2016-08-23 sj2012

Können Sie hinzufügen, was Sie bisher getan haben? – guradio

unmöglich zu helfen, ohne Ihren JS und CSS-Code zu sehen. – vijayP

Können Sie bitte auch die CSS teilen? –

erste CSS-Regel in den Klasse oder Ihre benannten Klasse .selected.

$(".sub-menu li a").hover(function(e){ 
    /** Remove selected class first **/ 
    $(".sub-menu li a").removeClass("selected"); 
    /** add selected class on hover**/ 
    $(this).addClass("selected"); 
});

Dies kann Ihnen helfen.

Quelle

2016-08-23 05:51:00

Vielen Dank für die Hilfe – sj2012

Diese Hilfe Sie:

$(".sub-menu li").on("click",function(){ 

      $(".sub-menu li").removeClass("active"); 

      $(this).addClass("active"); 

})

Schlusscode:

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <style> 
 
      .sub-menu { 
 
       display: none; 
 
      } 
 
      .active { 
 
       background-color: gray; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <ul class="page-sidebar-menu page-sidebar-menu-light"> 
 
    <li> 
 
       <a href="javascript:;"> 
 
       <i class="icon-logout"></i> 
 
       <span class="title">Quick Sidebar</span> 
 
       <span class="arrow "></span> 
 
       </a> 
 
       <ul class="sub-menu"> 
 
        <li> 
 
         <a href="quick_sidebar_push_content.html"> 
 
         Push Content</a> 
 
        </li> 
 
        <li> 
 
         <a href="quick_sidebar_over_content.html"> 
 
         Over Content</a> 
 
        </li> 
 
        <li> 
 
         <a href="quick_sidebar_over_content_transparent.html"> 
 
         Over Content & Transparent</a> 
 
        </li> 
 
        <li> 
 
         <a href="quick_sidebar_on_boxed_layout.html"> 
 
         Boxed Layout</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="javascript:;"> 
 
       <i class="icon-envelope-open"></i> 
 
       <span class="title">Email Templates</span> 
 
       <span class="arrow "></span> 
 
       </a> 
 
       <ul class="sub-menu"> 
 
        <li> 
 
         <a href="email_template1.html"> 
 
         New Email Template 1</a> 
 
        </li> 
 
        <li> 
 
         <a href="email_template2.html"> 
 
         New Email Template 2</a> 
 
        </li> 
 
        <li> 
 
         <a href="email_template3.html"> 
 
         New Email Template 3</a> 
 
        </li> 
 
        <li> 
 
         <a href="email_template4.html"> 
 
         New Email Template 4</a> 
 
        </li> 
 
        <li> 
 
         <a href="email_newsletter.html"> 
 
         Old Email Template 1</a> 
 
        </li> 
 
        <li> 
 
         <a href="email_system.html"> 
 
         Old Email Template 2</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li class="last "> 
 
       <a href="javascript:;"> 
 
       <i class="icon-pointer"></i> 
 
       <span class="title">Maps</span> 
 
       <span class="arrow "></span> 
 
       </a> 
 
       <ul class="sub-menu"> 
 
        <li> 
 
         <a href="maps_google.html"> 
 
         Google Maps</a> 
 
        </li> 
 
        <li> 
 
         <a href="maps_vector.html"> 
 
         Vector Maps</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
     $(document).ready(function(){ 
 
      $("a").attr("href","#"); 
 
      $(".title:contains(Quick Sidebar)").on("click",function(){ 
 
       $(".sub-menu").not($(".sub-menu").eq(0)).hide(500); 
 
       $(".sub-menu").eq(0).toggle(2000); 
 
      }) 
 
      $(".title:contains(Email Templates)").on("click",function(){ 
 
       $(".sub-menu").not($(".sub-menu").eq(1)).hide(500); 
 
       $(".sub-menu").eq(1).toggle(2000); 
 
      }) 
 
      $(".title:contains(aps)").on("click",function(){ 
 
       $(".sub-menu").not($(".sub-menu").eq(2)).hide(500); 
 
       $(".sub-menu").eq(2).toggle(2000); 
 
      }) 
 
      $(".sub-menu li").on("click",function(){ 
 
       $(".sub-menu li").removeClass("active"); 
 
       $(this).addClass("active"); 
 
      }) 
 
     
 
     }) 
 
     </script> 
 
    </body> 
 
</html>

Quelle

2016-08-23 06:07:23 Ehsan

Großartig, funktioniert gut .. – sj2012

@ sj2012, wenn Sie Hilfe bitte markieren Sie es! – Ehsan

Collapse Menü öffnen und aktiv nach dem Klick

Antwort

Verwandte Themen