揭开隐藏的嵌套子导航菜单

时间:2015-11-28 03:13:08

标签: javascript jquery html css

我一直在使用导航菜单,该菜单使用隐藏但使用jQuery显示的子导航菜单。问题是我现在需要添加一个嵌套在我已经创建的子导航菜单中的附加子导航菜单。

我有一个JSFiddle,可以在这里重现我的问题:http://jsfiddle.net/Learner12/xkaxbhvj/

基本上,我试图将链接(链接D,E和F)显示在“子子菜单导航1”下面。

我使用的当前代码仅包含第一个子导航菜单,而不是嵌套在其中的子菜单:

JS:

var main = new function () {

$('.trigdrop').click(function() {
    $('.trigdrop a:first-child').removeClass('borderIndent'); 
    $('.submenu').slideUp(); 

    $(this).children('a:first-child').addClass('borderIndent'); 

    $(this).children('.submenu').slideDown(400); 

});

我尝试通过制作“trigdrop2”和“submenu2”来遵循相同的指导方针,但遗憾的是无法解决问题。我认为这与这行代码有关:

  

$( '子菜单。')效果基本show();

该行简单地将所有内容都备份,但我不知道另一种方法确保在任何给定时间只打开一个子菜单,同时允许在该给定子中打开“子子导航菜单” - 导航菜单。

请查看附带HTML和CSS的JS小提琴。

1 个答案:

答案 0 :(得分:0)

您可能正在寻找.not() jQuery函数。这将从当前jQuery对象中删除指定的元素。所以你想到的问题就是问题,

$('.submenu').slideUp();

可以变成

$('.submenu').not($(this).children('.submenu')).slideUp();

选择除了点击的.submenu内的.trigdrop以外的所有.trigdrop2。然后可以按照您的想法处理$('.trigdrop2').click(function() { $('.submenu2').not($(this).children('.submenu2')).slideUp(); $(this).children('.submenu2').slideDown(); });

.not()

(注意这会再次使用runtime "mysql:mysql-connector-java:5.1.24" )。这是您更新的JSFiddle