jquery手风琴,根据href打开一个框

我正在尝试根据我发送到该页面链接打开手风琴

这是我的网址

services.html#品牌

我正在使用以下代码

<script type="text/javascript">
      $(document).ready(function(){
     $('#accordion').accordion({collapsible: true,animated: 'slide',autoHeight: false,navigation: true,active : 'false'});
      });
  </script>

手风琴看起来像:

<div id="accordion">
<h3 id="branding"><a href="#">branding</a></h3>
<div>
<p>Does your business have a</p>
</div>
<h3><a href="#print">Print</a></h3>
<div>
<p>brochures</a></p>
</div>
</div>

任何帮助将不胜感激…
http://docs.jquery.com/UI/Accordion

解决方法

哦,我看到杰夫报告说,目前的UI版本是坏的,但我实际上有一个使用当前版本的解决方案…

HTML

<div id="accordion">
 <h3><a href="#branding">branding</a></h3>
 <div>
  <p>Does your business have a</p>
 </div>
 <h3><a href="#print">Print</a></h3>
  <div>
  <p>brochures</p>
  </div>
</div>

脚本

$(function(){
 $('#accordion').accordion({
  collapsible: true,navigation: true
 });
 // open content that matches the hash
 var hash = window.location.hash;
 var thash = hash.substring(hash.lastIndexOf('#'),hash.length);
 $('#accordion').find('a[href*='+ thash + ']').closest('h3').trigger('click');
})

我最初使用了一个[href $= …],但是将它改成了一个[href * = …] …或者会工作

更新:navigation option was removed from jQuery UI 1.10.0,所以使用这种方法

CSS

.accordion {
  position: relative;
}
.accordion .accordion-link {
  position: absolute;
  right: 1%;
  margin-top: 16px;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: url(link.png) center center no-repeat; /* approx 12x12 link icon */
}

脚本

var hashId = 0,$accordion = $('#accordion');
if (window.location.hash) {
  $accordion.children('h3').each(function(i){
    var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
    this.id = txt;
    if (txt === window.location.hash.slice(1)) {
      hashId = i;
    }
  });
}

$accordion.accordion({
  active: hashId,animate: false,heightStyle: 'content',collapsible: true,create: function( event,ui ) {
    $accordion.children('h3').each(function(i){
      $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
    });
    $accordion.find('.accordion-link').click(function(){
      $accordion.accordion( "option","active",$(this).data('index') );
    });
  }
});

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...