jQuery手风琴菜单 - 保持手风琴菜单打开页面我在

我希望你能帮到你。我对jQuery非常陌生，正在为我的侧面导航工作5或6级的手风琴菜单。我从Dane Peterson @ daneomatic.com获得了大部分代码（感谢Dane！）。但是，我卡上了一两件事：jQuery手风琴菜单 - 保持手风琴菜单打开页面我在

我希望有我的手风琴/树的工作是这样的：

，当我浏览下来到，比方说三个级别，并点击链接打开链接到该级别的页面，如果我在该页面上加载第三级页面，我该如何指示？另外，当我加载页面时，如何保持树打开到该级别？

我想我问的是：手风琴/树是否有自动更新的方式来显示你在哪个页面，并让该树打开到那个级别？

在此先感谢！

来源

2009-10-21 MelissaTA

这是JavaScript导航网站的缺陷之一 - 您的网址实际上并未指向您的网页，就像传统网页一样。这使得使用普通浏览器功能（如书签和后退按钮）变得很困难。

有些人似乎现在使用的一种解决方案是将这些信息存储在url的哈希部分之后。

http://www.mysite.com/path/index.html#jsPageIndicator

通过上面的地方“jsPageIndicator”的存储信息，然后你可以使用JavaScript解析之后$（文件）。就绪（），并将它告诉你应该加载的页面。在你的情况下，这可能是简单的，比如手风琴的索引有重点（应该是开放的）。

你可能也想看看jQuery history plugin.

或者，亚历克斯低于所指出的，benalman.com/projects/jquery-bbq-plugin

来源

2009-10-21 19:42:15 Matt

如果你使用这里描述的哈希改变方法，下面的插件是不匹配的：http://benalman.com/projects/jquery-bbq-plugin/ - 它很快将取代jQuery历史插件，这是非常过时的。 – 2009-10-21 19:45:24

@亚历山大 - 不错！并没有意识到这一点。 – Matt 2009-10-21 19:51:34

感谢您的信息 - 我会看看，如果我能得到它与您的解决方案或从没有惊喜（上图） - 手指交叉工作！ – MelissaTA 2009-10-23 17:49:24

为了得到手风琴自动打开基于URL的正确部分，你会开始使navigation选项的东西，如：

$('#accordion').accordion('option', 'navigation', true);

默认情况下，此选项查找具有该URL fragme相匹配的href手风琴标题链接nt（如果您的URL是http://somesite.com/about#contact，＃contact是片段）并打开该标题链接的部分。由于您使用的手风琴导航到不同的页面，你可能不会有URL片段来匹配，所以你必须编写自定义navigationFilter：

$('#accordion').accordion('option', 'navigationFilter', function(){ ... });

可以使用navigationFilter选项覆盖手风琴插件如何匹配当前页面的URL的标题链接。

到目前为止，我们已经根据当前页面打开了手风琴的右侧部分。接下来，我们需要突出显示该部分对应于该页面的链接。你会做的东西，如：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#accordion li').each(function() { 
     var li = $(this); 
     var a = $('a', li); 
     if(/* compare the href of the 'a' element to the current URL */) { 
     li.addClass('active'); 
     } 
    }); 
    }); 
</script> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
    <ul> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
    <ul> 
     <li><a href="/help">Help</a></li> 
     <li><a href="/faq">FAQ</a></li> 
    </ul> 
    </div> 
</div>

在这里，我们正在经历导航手风琴的所有网页链接，采摘，当前URL匹配的一个，并应用.active类吧，你然后可以使用不同的CSS样式。

旁白：另一个，可能会更好，方式来完成第二部分是建立与已经应用到合适的链接.active类的页面，但假定你可以控制后台和你知道该怎么做。事实上，如果是这样的话，您可以跳过整个navigationFilter的东西，并生成一个<script>块来设置手风琴上的active选项以打开正确的部分。

来源

2009-10-21 19:52:35

谢谢，我会尝试这些解决方案。星期五快乐！ – MelissaTA 2009-10-23 17:47:50

你可以在这里看到：http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

来源

2010-02-06 13:50:09 MacBee

以上都不为我工作。 jquery ui的文档是多余的，源代码没有留下许多不熟悉jquery的人的线索。

我在边栏中使用了手风琴，每个内容部分的链接都在表格内，所以我必须跟踪我的HTML结构（一个脆弱的东西），并在创建手风琴之后立即执行此操作：

 $("#sidebar td").each(function() { 
      var td = $(this); 
      var a = td[0].firstChild; 
      if (a.href == location.href) { 
       $("#sidebar").accordion("activate", 
         td.parent().parent().parent().parent().prev()); 
      } 
     });

是的，可怕的，备份TR，TBODY，表，格，但它的工作，并在我们的例子中，我们已经好几个月改变了HTML的结构。

来源

2010-03-23 09:10:32

这里是为我工作的例子：

Need help with jQuery UI Accordion navigationFilter option

来源

2010-04-23 23:19:04 jslatts

确定这个问题一直缠着我了一会儿，以为我会后我的解决这个问题。（我有点用JQuery的新手，所以......）

在我的情况下，我有一个母版页，其中包含JQuery脚本来处理菜单的自动化，我有几个内容页有不同的菜单（我有一个水平菜单横跨页眉，然后JQuery手风琴处理子菜单可以这么说）。

我将id标签添加到菜单头div中，然后将以下内容放置在内容页面的内容占位符中。

$(document).ready(function() { 
     $('.active').next().hide().removeClass('active'); 
     $('#yourMenuHeaderIdTag).addClass('active').next().show(); 
    };

这完美的作品，它的确让我不知道为什么我有这个挣扎在过去一周左右的时候解决方案就是这么简单！

来源

2011-12-29 23:51:06

jQuery手风琴菜单 - 保持手风琴菜单打开页面我在

回答

相关问题