子菜单手风琴上的jQuery活动类

时间:2014-09-18 04:39:04

标签: jquery css menu navigation

我在为这个垂直手风琴菜单的子菜单添加一个单独的活动类时遇到了麻烦。

所以基本上应该发生的是,当你点击子菜单项时,' li'背景应该显示为蓝色。

http://jsfiddle.net/tebrown/fadptmsu/

var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#cssmenu > li > a:eq('+checkCookie+')').addClass('active').next().show();
}

$('#cssmenu > li > ul > li > a').click(function(){
var checkElement = $(this).next();
$(this).removeClass('testing');
$(this).closest('li').addClass('testing');  

});

$('#cssmenu > li > a').click(function(){

  var navIndex = $('#cssmenu > li > a').index(this);
  $.cookie("nav-item", navIndex);
  $('#cssmenu li ul').slideUp();
   if ($(this).next().is(":visible")){


       $(this).next().slideUp();
   } else {
   $(this).next().slideToggle();
   }
   $('#cssmenu li a').removeClass('active');

   $(this).addClass('active');
 });

如果有人能帮我解决这个问题,那就太好了。)

干杯

3 个答案:

答案 0 :(得分:1)

我猜错了你:active

错误的CSS:

#cssmenu li ul li a.active { background-color: blue; }

正确的CSS:

#cssmenu li ul li a:active { background-color: blue; }

JSFIDDLE.

答案 1 :(得分:1)

您没有将活动类添加到子菜单

$('#cssmenu > li > ul > li > a').click(function () {
    var checkElement = $(this).next();
    $(this).removeClass('testing');
    $(this).closest('li').addClass('testing');
    $('#cssmenu li li .active').removeClass('active');
    $(this).addClass('active');
});

演示:Fiddle

答案 2 :(得分:1)

请为您的点击处理程序尝试以下代码。

$('#cssmenu > li > ul > li > a').click(function(){
    var checkElement = $(this).next();
    // find the closest li
    var liObj = $(this).closest('li');
    // remove any active class that has already been added for other li
    liObj.siblings().find("a").removeClass("active");
    // add active class to current anchor
    liObj.find("a").addClass("active"); 
});

@regent感谢您的建议。