使用jQuery实现的垂直菜单导航（带关闭切换功能）

Question

我已经使用jQuery成功实现了垂直导航。它可以匹配URL，所以在动态网站上不需要使用cookie也能保持打开状态。这是我当前的fiddle链接：

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菜单项。非常感谢您的任何帮助！ :)

- annieFlower

---

我认为你可以添加一个变量来判断菜单是否打开，如果打开，则在单击时删除你添加的类（可扩展）。 - btevfik

谢谢您的回复btevik！非常感谢...我现在有点脑残，jQuery不是我的强项...不确定如何调用提出的变量想法... - annieFlower

Answer 1

这应该可以让您开始。

在页面中的每个按钮上添加value="1"。

然后获取该值，如果等于1，则基本上打开菜单（目前的状态）。

然后将该值设置为0。

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

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

- btevfik

---

谢谢btevfik! 这看起来要好得多，非常接近了！我已经在我的动态网站上进行了测试，在按钮上放置了默认值“1”，因此当页面加载时，所有按钮都具有该值...我遇到的问题是，当我点击菜单下方的子类别时，页面重新加载，菜单保持打开状态（这很棒！），但要折叠按钮上方的菜单项（由于URL匹配而展开），需要两次点击才能关闭活动类别上面的菜单项...这是我当前的示例：http://jsfiddle.net/J8HnC/11/ - annieFlower

哦，是的。因为当您重新加载时，值会被重置，所以它会有这种行为。我猜您必须将其保存在 cookie 中并检索它。或者您必须在您的 URL 上添加附加信息。 - btevfik

实际上，我认为您可以使用http://api.jquery.com/hasClass/检查它是否具有“可扩展”类，如果有，则在页面加载时将值设置为0。 - btevfik

嗨btevfik！这绝对是因为树形结构中上面的<li>块在页面重新加载时没有类名“expandable”，所以第一次点击会添加类名，第二次点击会移除类名...非常感谢您的帮助！hasClass看起来是一个有趣的方法... - annieFlower

我认为我需要以某种方式进行处理。 - annieFlower