JQuery手风琴锚功能

时间:2013-02-04 18:47:41

标签: javascript jquery jquery-ui jquery-ui-accordion

我试图将以下行为添加到JQuery Accordion:

1)根据内部页面链接(#section1)激活手风琴的一部分。这意味着如果用户转到URL mypage.com/page.php#test,我将使用JS来激活手风琴部分。

2)将手风琴可复制链接的每个部分的标题指向将激活手风琴的所述部分的URL。因此,如果用户右键单击手风琴的“节标题”并复制链接位置,则会将mypage.com/page.php#test放在用户的剪贴板上。


我有1)想通了,但这是我自己写的代码。我正在弄乱navigation:true选项,但没有任何运气。如果有人愿意指出我正确的方向,我宁愿使用作者的代码到我自己的代码,但如果不是,那么就不会有大事了。

2)是我不知所措的地方。似乎JQuery手风琴是在手风琴部分的标题中的任何地方点击事件的绑定代码。这似乎使得无法向用户提供我想要的复制链接位置功能。<​​/ p>

我的HTML:

<div id="accordion">
   <article class="std_page_content">
    <h3><a id="#test">Test</a></h3>
    <div>
       test
    </div>
   </article>
   .....additional accordion sections....
</div>

我的Javascript:

$("#accordion").accordion({header : "h3", heightStyle : "content", /*Allows full collapse*/collapsible: true, /*collapses sections*/ active:false, navigation:true});

var theUrl = window.location.href;
var hashValue = theUrl.contains("#") ? theUrl.split('#')[1] : null;

if(hashValue != null)
{
    //open the corresponding accordion section
}

1 个答案:

答案 0 :(得分:1)

只需给你的锚标签一个href属性:

<h3><a id="#test" href="#test">Test</a></h3>

更新:如果您想要覆盖整个手风琴标题的链接,可以将<h3>标记放在锚标记内,如下所示:http://jsfiddle.net/3tGYB/1/

<div id="accordion">
  <article class="std_page_content">
    <a id="#test" href="#test" class="header"><h3>Test</h3></a>
    <div>
      test
    </div>
  </article>
</div>

当然要改变你的javascript:

$("#accordion").accordion({header : "a.header" /*plus other options*/});