jquery手风琴，基于href打开一个框 [英] jquery accordion, opening a box based on href

问题描述

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

这是我的网址

services.html#branding

我在头部使用以下代码:

手风琴看起来像:

<h3 id="branding"><a href="#">Branding</a></h3><div><p>贵公司是否有</p>
<h3><a href="#print">打印</a></h3><div><p>小册子</a></p>

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

解决方案

哦，我看到 Jeff 报告说当前的 UI 版本已损坏，但实际上我有使用当前版本的解决方案...

HTML

<h3><a href="#branding">品牌</a></h3><div><p>贵公司是否有</p>
<h3><a href="#print">打印</a></h3><div><p>小册子</p>

脚本

$(function(){$('#accordion').手风琴({可折叠:真实，动画:'幻灯片'，自动高度:假，导航:真的});//打开与哈希匹配的内容var hash = window.location.hash;var thash = hash.substring(hash.lastIndexOf('#'), hash.length);$('#accordion').find('a[href*='+ thash + ']').closest('h3').trigger('click');})

我最初使用了 a[href$=...]，但将其更改为 a[href*=...].../p><小时>

更新:navigation 选项已从 jQuery UI 1.10 中删除.0，所以使用这个方法:

CSS

.accordion {位置:相对；}.accordion .accordion-link {位置:绝对；正确:1%；边距顶部:16px；z-索引:1；宽度:12px；高度:12px；背景: url(link.png) center center 不重复；/* 大约 12x12 的链接图标 */}

脚本

var hashId = 0,$accordion = $('#accordion');如果(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({活动:hashId，动画:假，heightStyle: '内容',可折叠:真实，创建:函数(事件，用户界面){$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') );});}});

I am trying to open an accordion based on a link i send to the page

This is my url

services.html#branding

I am using the following code in the head:

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

And the accordion looks like:

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

Any help would be greatly appreciated... http://docs.jquery.com/UI/Accordion

解决方案

Oh I see Jeff reported that the current UI version is broken, but I actually had a solution using the current version...

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>

Script

$(function(){
 $('#accordion').accordion({
  collapsible: true,
  animated: 'slide',
  autoHeight: false,
  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');
})

I used a[href$=...] originally, but changed it to a[href*=...]... either will work

---

Update: the navigation option was removed from jQuery UI 1.10.0, so use this method:

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 */
}

Script

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

这篇关于jquery手风琴，基于href打开一个框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！