摺疊菜單打開後點擊

我有一個側邊欄摺疊菜單，它也有下拉菜單。當我點擊下拉並點擊鏈接，下拉菜單崩潰。我想保持打開並突出顯示鏈接，直到點擊其他鏈接。我該怎麼做？任何幫助。摺疊菜單打開後點擊

直到點擊其它鏈接。我想積極像下面。

HTML代碼

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

來源

2016-08-23 sj2012

您可以添加迄今做了什麼？ – guradio

無法看到您的JS和CSS代碼。 – vijayP

你能分享一下css嗎？ –

首先添加CSS規則.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"); 
});

這可能對你有幫助。

來源

2016-08-23 05:51:00

謝謝你的幫助 – sj2012

這幫助你：

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

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

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

})

最終代碼：

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

來源

2016-08-23 06:07:23 Ehsan

太棒了，工作正常.. – sj2012

@ sj2012，如果你幫助你標記它！ – Ehsan

摺疊菜單打開後點擊

回答

相關問題