单击手风琴菜单外的链接时折叠 jQuery 手风琴

Question

我正在使用这里jQuery Vertical Accordion Menu Plugin 找到的这个jQuery 手风琴菜单。该插件运行良好，无需太多自定义。我真正寻找的这个插件提供的功能是页面刷新后的持久菜单状态。此插件使用 cookie 来完成此操作。解决问题...

如果您在手风琴菜单外单击，该状态仍将保持不变。当在手风琴菜单外单击链接时，我正在尝试找出一种折叠整个菜单的方法。

我的第一个想法是在 window.location 等于某个 URL 时找到某种方法来删除或重置状态保存 cookie 中的数据。 （目前如果返回首页时菜单完全折叠，我很高兴）。

我认为最好的解决方案是一些 jQuery，如果在 #Accordion-Navigation 之外点击了一个，它会重置 cookie 或折叠菜单。

我对任何事情都持开放态度。

我尝试了以下方法，但没有成功。

jQuery(document).ready(function(jQuery){
    var siteurl = "http://myhomepageurl.com/index.php";
if (window.location.href == siteurl) {
    jQuery.cookie('dcjq-accordion-1', null, { path: '/'});
    }
});

任何关于更优雅解决方案的建议将不胜感激！感谢您抽出宝贵时间提前查看！

Answer 1

有一个技巧可以做到这一点，只需在你的 html 和 body 元素上绑定一个事件处理程序。 如果点击了手风琴，则停止传播，否则折叠手风琴。

$(function () {
  $('html').on('click', collapseAccordion);
  $('body')
    .on('click','.accordion', function (e) { e.stopPropagation() });
});

您应该创建一个函数collapseAccordion，通过 api 调用折叠手风琴。

Answer 2

$(function () {
  $('body').mousedown(function (e) { 
    if($(e.target).closest('.accordion').length != 1){
       //click was outside accordion,
       // so close it
    }      
});