带有 jQ​​uery 条件的垂直菜单/子菜单

Posted 2023-03-21

【中文标题】带有 jQ​​uery 条件的垂直菜单/子菜单

【英文标题】：Vertical Menu/Submenu with jQuery conditions

【发布时间】：2013-10-22 16:51:50

【问题描述】：

我希望将以下条件添加到我现有的页面中。顺便说一句，目前一切似乎都运行良好，可以在这里看到：http://www.ceramictilepro.com/Ceramic-Tile-And-Grout-Tips.php

1) 当点击上述链接时，页面会出现一个垂直菜单/子菜单，只有菜单可见（目前所有菜单/子菜单都是展开的）。

2) 单击选定的菜单时，子菜单会展开并可见（目前有效，因此这里没有更改）

3) 单击子菜单时，将打开新页面。 （目前也可以）

4) 这里是我需要帮助的地方，我希望新页面关闭所有其他菜单，但单击所选子菜单的菜单除外。

注意：所选链接以红色背景突出显示，以便于导航。 （这保持不变，这里无需更改）

这里是Fiddle

这是当前工作的 jQuery

$.each([1, 2, 3, 4, 5], function (index) 
$(".toggle" + index).click(function () 
    $(".submenu" + index).slideToggle("fast", function () 
        // Animation complete.
    );
);
);


$(function () 
$('a').each(function () 
    if ($(this).prop('href') == window.location.href) 
        $(this).addClass('_current_highlight_button');
    
);
);
$(function () 
var split = window.location.pathname.split('/');
var mnurl = split[split.length - 1];
mnurl = '#';
$(' a[href="' + mnurl + '"]').addClass("_current_highlight_button");
); // mnurl='.php goes here';

感谢您的任何建议:)

【问题讨论】：

能否将“_current_highlight_button”与 jQuery 一起使用，以识别最后被点击的子菜单链接？如果是这样，那么代码将需要保持该子菜单打开并关闭“其他”。你怎么看？当然，这是基于所有子菜单作为默认位置关闭。

是的，查看您的实时站点，我意识到您已经有一种方法可以将点击的链接突出显示为红色。我使用相同的代码想出了一种方法来识别要保持打开的子菜单。看看我更新的答案。

【参考方案1】：

更新

$(function () 
  var selected;
  $('.vmenu li a').click(function(e)
    $('.vmenu ul').not($(this).parent().next('ul')).css('display','none');
  );
  $('a').each(function () 
    if ($(this).prop('href') == window.location.href) 
        $(this).addClass('_current_highlight_button');
        selected = $(this).parent().parent();
    
  );
  $('.vmenu ul').not(selected).css('display','none');
);

【讨论】：

嗨，特雷弗，感谢您的帮助。 #4 基本上是说只扩展选定的菜单/子菜单，而所有其他菜单/子菜单都将关闭。希望清除。小提琴有 4 个菜单/子菜单，因此在单击子菜单链接后加载新页面时，基本上只会展开 1 个菜单/子菜单。 Prolly 是一种更好的解释方式:)

@user2844139 好的，看看我的更新。让我知道这是否适合您。

请注意，这应该适用于子菜单。现在，我不确定您是否希望将所有这些都关闭，除了单击菜单时单击的那个。但我也会得到一些处理这个问题的东西。

您好 Trevor，是的，我正在寻找要关闭的所有其他子菜单。最好只扩展选定的子菜单而关闭其余 3 个子菜单。顺便说一句，感谢您在上面发布的 jQuery :)

刚试了一下，没有运气，点击选中的子菜单链接时，所有子菜单都关闭了。你可以在这里看到它ceramictilepro.com/Ceramic-Tile-And-Grout-Tips.php 注意：请仅单击顶部的垂直菜单以选择子菜单，因为我正在更新其他 3 个菜单/子菜单