Javascript jQuery Accordion-如何使用URL传递状态'；s

我试图在JQuery accordion菜单中维护状态，如果可能的话，我希望避免任何服务器端处理或不必要的变量传递

这是我的密码：

<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>

当页面加载时，我可以打开“Autos”菜单，但我想根据URL动态查找要打开的菜单或ul，我对JavaScript非常陌生，我遇到的问题是：

active = FIND_SECTION_TO_OPEN_BASED_ON_URL.to_int;

有人知道如何实现这一点吗

---

（我对此做了很多研究，但没有找到一个在这里有效的解决方案）

您可以使用location.hash属性从URL打开菜单。您将以如下方式在哈希标记中传递菜单号：

网址：

然后使用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>

$（文档）.ready（函数（）{
var accordion=$（'ul.accordion'）；
var show_link='/cats'；
var active=window.locatioh.hash.replace（“#”和“”）；
手风琴。手风琴（“激活”，激活）；
});

您可以使用location.hash属性从URL获取要打开的菜单。您将以如下方式在哈希标记中传递菜单号：

网址：

然后使用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>

$（文档）.ready（函数（）{
var accordion=$（'ul.accordion'）；
var show_link='/cats'；
var active=window.locatioh.hash.replace（“#”和“”）；
手风琴。手风琴（“激活”，激活）；
});

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

---

首先，你需要像这样通过锚传递当前页面（你传递什么并不重要，只是它是唯一的）：

---

这是我为我的页面所做的。我的URL的格式是

site.com/#page/accordion/tab

。我还这样做，当用户点击手风琴或标签时，散列会发生变化。这样，如果您要导航到其他地方的URL，您将转到刚才看到的手风琴

不过我确实遇到了hashchange事件的问题。由于它是一个散列，如果用户从

site.com/#page/accordion one

转到

site.com/#page/accordion two

，这是一个hashchange，而不是页面加载，因此我将下面的代码放在一个函数中，并将其绑定到hashchange事件。问题是，当我在下面的代码中更改哈希值时，我必须解除它的绑定，而当我重新绑定它时，它仍然捕获hashchange事件，这让我遇到了一些麻烦。 见我的问题

---

这是我为我的页面所做的。我的URL的格式是

site.com/#page/accordion/tab

。我还这样做，当用户点击手风琴或标签时，散列会发生变化。这样，如果您要导航到其他地方的URL，您将转到刚才看到的手风琴

不过我确实遇到了hashchange事件的问题。由于它是一个散列，如果用户从

site.com/#page/accordion one

转到

site.com/#page/accordion two

，这是一个hashchange，而不是页面加载，因此我将下面的代码放在一个函数中，并将其绑定到hashchange事件。问题是，当我在下面的代码中更改哈希值时，我必须解除它的绑定，而当我重新绑定它时，它仍然捕获hashchange事件，这让我遇到了一些麻烦。 见我的问题

---

我的新图书馆就是这样做的

我的新图书馆就是这样做的

但这会将字符串传递给手风琴方法。。。它不需要是一个数字吗？在使用它之前，您需要从散列中删除

#

，否则您是正确的。如果不能，jQuery在删除散列后将能够找出它是一个数字，而不是传递

active

pass

（active*1）

，还请注意，如果需要，可以传递jQuery对象。我正在做与我的页面中相同的事情，我使用

id

和jQuery对象中的一个pass:

accordion.accordion（'activate'，$（“#accordion\u pets”）

。我更喜欢这种方法，因为它可以让你看起来更漂亮，更具可读性URLS@AsherMaximum说得好！我对答案进行了编辑，删除了hash标记。但这会将字符串传递给accordion方法。。。它不需要是一个数字吗？在使用它之前，您需要从散列中删除

#

，否则您是正确的。如果不能，jQuery在删除散列后将能够找出它是一个数字，而不是传递

active

pass

（active*1）

，还请注意，如果需要，可以传递jQuery对象。我正在做与我的页面中相同的事情，我使用

id

和jQuery对象中的一个pass:

accordion.accordion（'activate'，$（“#accordion\u pets”）

。我更喜欢这种方法，因为它可以让你看起来更漂亮，更具可读性URLS@AsherMaximum说得好！我对答案进行了编辑，删除了散列标签。我在我的页面中实现了这一点，我遇到的问题之一是动画。当页面打开时，手风琴的动画看起来很奇怪。我会确保取消激活动画，在你激活手风琴后重新激活。请参阅我的答案，了解我是如何实现的。我已经在我的页面中实现了这一点，我遇到的问题之一是动画。当页面打开时，手风琴的动画看起来很奇怪。我会确保取消激活动画，在你激活手风琴后重新激活。请参阅我的答案，了解我是如何实现这一点的。

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

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

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] );
}