Question

我正在尝试在我的JQuery手风琴菜单中维护状态，如果可能的话，我想避免任何服务器端处理或不必要的变量传递。

这是我的代码：

<ul class="accordion">
  <li>
    <a href="#" class="opener">Autos</a>
    <div class="slide">
      <ul>
        <li><a href="/cars">Cars</a></li>
         <li><a href="/motobikes">Motorbikes</a></li>
      </ul>
    </div>
  </li>

  <li>
    <a href="#" class="opener">Pets</a>
    <div class="slide">
      <ul>
        <li><a href="/cats">Cats</a></li>
        <li><a href="/dogs">Dogs</a></li>
      </ul>
    </div>
  </li>
</ul>


<script type="text/javascript">
  $(document).ready(function() {
    var accordion = $('ul.accordion');
    var show_link = '/cats';
    active = FIND_SECTION_TO_OPEN_BASED_ON_URL;
    accordion.accordion('activate', active );
  });
</script>

通过硬编码

accordion.accordion('activate', 0 );

我可以在页面加载时打开“Autos”菜单，但我想要根据URL动态查找要打开的菜单或ul，我是JavaScript的新手，我遇到的问题是在这一行：

active = FIND_SECTION_TO_OPEN_BASED_ON_URL.to_int;

有谁知道如何实现这个？

（我已经对此进行了大量研究，但未能找到适用于此的解决方案）

Answer 1

您可以使用location.hash属性从URL中打开菜单。您可以在这样的哈希标记中传递菜单编号：

网址：http://www.domainname.com/page.html#1

然后使用JS获取它并将其传递给脚本：

<script type="text/javascript">
  $(document).ready(function() {
    var accordion = $('ul.accordion');
    var show_link = '/cats';
    var active = window.locatioh.hash.replace("#", "");
    accordion.accordion('activate', active );
  });
</script>

Answer 2

首先，您需要通过锚点传递当前页面（您传递的内容并不重要，只是它是唯一的）：

<a href="#autos" class="opener">Autos</a>
...
<a href="#pets" class="opener">Pets</a>

然后，您可以将索引基于结果哈希

active = $(".opener[href='"+location.hash+"']").parents("li").index();

Answer 3

这是我为我的页面所做的。我的网址格式为site.com/#page/accordion/tab。我也这样做，以便当用户点击手风琴或标签时，哈希值会发生变化。这样，如果你要导航到其他地方的URL，你会去你刚看的手风琴。

我确实遇到了hashchange事件的问题。因为它是一个哈希，如果用户从site.com/#page/accordion-one转到site.com/#page/accordion-two，那就是哈希变换而不是页面加载，所以我将下面的代码放在一个函数中并将其绑定到hashchange事件。问题是当我在下面的代码中更改哈希时我必须取消绑定它，并且当我重新绑定它时仍然遇到一些麻烦仍然会捕获hashchange事件。请参阅我的问题here。

var hash = window.location.hash;
hash = hash.replace(/#/, "");
hash = hash.split("/");

if(typeof hash[1] !== 'undefined'){
    //select campus accordion
    //first disable the animation and the function that changes the hash:
    $("#accordion").accordion("option", "animated", false);
    $('.ui-accordion').unbind('accordionchangestart');
    $("#accordion").accordion("activate", $("#accordion-"+hash[1]));
    $("#accordion").accordion("option", "animated", 'slide');
    $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
        var hash = window.location.hash;
        hash = hash.replace(/#/, "");
        hash = hash.split("/");

        var name = $(ui.newHeader).attr("name");

        var val = hash[0]+"/"+name;
        sessionStorage.setItem("accordion", val);
        hashChange(val);
    });
}
if(typeof hash[2] !== 'undefined'){
    //select tab
    $(".ui-tabs").tabs("select", "#tabs-"+hash[2] );
}

Answer 4

我的新图书馆这样做了。 Check it out

jQuery Accordion - 如何使用URL传递状态？

4 个答案: