使用 jquery 的垂直菜单导航（关闭切换）

Posted 2023-04-13

【中文标题】使用 jquery 的垂直菜单导航（关闭切换）

【英文标题】：vertical menu navigation with jquery (closing toggle)

【发布时间】：2013-04-28 11:49:10

【问题描述】：

我的垂直导航非常适合 jQuery。它与 URL 匹配，因此它在动态站点上保持打开状态，不需要 cookie。这是我目前的小提琴：

http://jsfiddle.net/J8HnC/

我现在使用的 jQuery 是这样的：

jQuery('#categories .sub').not('.open').children('ul').hide();

jQuery(document).on('click', '#category-menu #categories button', function()

    $(this).parent().addClass('expandable');

    if(jQuery(this).parent().hasClass('expandable')) 
        jQuery(this).html('+');
        jQuery(this).siblings('ul').stop(true,true).css('display','block').slideDown(200, 'linear');
     else 
        jQuery(this).siblings('ul').stop(true,true).css('display','none').slideUp(200, 'linear');
    ;

);

var url = window.location.toString() 

$('#categories ul li a').each(function()

    var categoryHref= $(this).attr('href');

    if( url.match(categoryHref)) 
        $(this).addClass('active-anchor')
        $(this).parents('ul.category-child').show();
        $(this).parents('ul.category-child li').addClass('expandable');
    

);

但我无法计算出在我的 jQuery 中正确关闭菜单项的逻辑。任何帮助将不胜感激！ :)

【问题讨论】：

我认为你可以添加一个变量来查看菜单是否打开，如果打开然后点击删除你添加的类（消耗）

...感谢您的回复 btevik！非常感谢...我现在脑子很乱，jquery不是我的强项...不确定如何调用提出的可变想法...

【参考方案1】：

这应该让你开始。

将value="1" 添加到页面中的每个button。

然后获取值，如果等于1，则基本打开菜单。 （你现在拥有的）

然后将值设置为0。

如果值为0，请撤消您所做的操作。然后将值设置为1。

http://jsfiddle.net/J8HnC/2/

【讨论】：

...谢谢btevfik！这看起来工作得更好，太接近了！我已经在本地的动态站点中进行了测试，我在按钮上设置了默认值“1”，所以现在所有按钮在页面加载时都具有该值......我看到的问题是当我点击一个子类别时降低菜单，页面重新加载，菜单保持打开状态（太棒了！），但是要折叠按钮上方的菜单项（由于 URL 匹配而展开），需要单击两次才能使活动类别上方的菜单项关闭....这是我目前的小提琴：jsfiddle.net/J8HnC/11

哦，是的。因为当你重新加载值被重置时，它会有这种行为。我想您必须将其保存在 cookie 中并检索它。或者您必须在您的网址上添加其他信息。

实际上我认为您可以检查它是否具有expendable 类和api.jquery.com/hasClass，如果它在页面加载时将值设置为0。

....嗨，btevfik！肯定是因为树中的 块在页面重新加载时没有“可扩展”类，所以第一次单击添加类，第二次单击此时删除该类...非常感谢寻求帮助！ hasClass 看起来很有趣的方法...

...我想我需要以某种方式