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（）在我点击时显示下一个元素，但我不确定我是否能使用正确的东西。当我在下级菜单上时，如何让背景颜色保持活动状态？

demo

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代码： -

$ionicScrollDelegate.scrollTo(0, 0, true)

Answer 4

只需在jQuery文件中添加$(this).toggleClass('on');即可。

Answer 5

只需添加

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

Fiddle

单击时更改背景

5 个答案: