單擊后更改了背景

Question

我有一個主菜單。 當我單擊或懸停時，有背景色。 但是，當我進入下一級菜單時，背景色恢復原狀。

這是代碼：

$('.main-menus > ul > li > a').on('click',function(){
    $('.tmain-subs').hide();
    $(this).closest('.toggle > li > a').toggleClass('hover');
    $(this).next().show();
    return false;
});

單擊時，我嘗試使用.next（）來顯示下一個元素，但是我不確定是否可以使用此正確的東西。 當我在較低級別的菜單上時，如何讓背景顏色保持活動狀態？

演示

Answer 1

$('.main-menus > ul > li > a').on('click',function(){
    $('.tmain-subs').hide();
    $(this).closest('.toggle > li > a').toggleClass('hover');
    $(this).next().show();
    $('.main-menus > ul > li > a').removeClass('on');
    $(this).toggleClass('on');
    return false;
});

Answer 2

您只需要刪除主菜單中<ul>的默認邊距。

 .main-menus ul {
   width: 340px; 
   height: 100vh;
   border-left: 1px solid #0a92fc; 
   background: #e0e9eb; 
   margin:0;
 }

小提琴：

http://jsfiddle.net/374wbopa/2/

Answer 3

我解決了您的問題，只需將您的jquery代碼替換為以下內容：-

$('.main-menus > ul > li > a').on('click',function(){
    $('.tmain-subs').hide();
    $('.main-menus > ul > li > a').removeClass("on");
    $(this).toggleClass('on');
    $(this).next().show();
    return false;
});

Answer 4

只需添加$(this).toggleClass('on'); 在您的jQuery文件中，您就完成了。

Answer 5

只需添加

$('.main-menus > ul > li > a').each(function () {
      $(this).css("background","");
});
$(this).css("background","#0a92fc");

小提琴