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

什么问题HREF？你是否有错误，它看起来不正确？ – 2009-12-07 16:19:42

它没有打开手风琴“品牌” – Andy 2009-12-07 16:35:27

只是一个警告任何人看着这个'导航'选项已被删除[JQuery UI 1.9]（http://jqueryui.com/upgrade-guide/1.9/#deprecated-导航和navigationfilter选项）。它用于根据URL设置活动面板。我想它一定是太有用了。 :( – 2013-04-22 01:03:26

答

哦，我看到杰夫报道，目前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, 
    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'); 
})

我最初使用的是a[href$=...]，但将其更改为a[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')); 
    }); 
    } 
});

感谢你们两位注意到版本的问题并感谢上述解决方案。 – Andy 2009-12-07 23:06:52

它的工作原理就像是一个魅力！非常好的解决方案 – frabiacca 2013-05-21 13:44:44

我已经更新了我的答案，使用jQuery UI v1.10.0 + – Mottie 2014-01-28 23:30:21

答

的坏消息是，手风琴插件目前破（截至1.7.2，which you can see from ticket #4653）。好消息是它是固定的，并且you can already grab the latest version here - 但要注意，它还不是一个稳定版本！

如果您使用1.8.1代码，导航功能将再次运行。设置navigation: true将引导手风琴在您浏览到与导航片段匹配的网址时自动打开正确的面板（以便您的示例可以正常工作：services.html#branding）。

我想你也想缺少的标识添加到你的品牌定位标记，像这样：

<h3 id="branding"><a href="#branding">Branding</a></h3>

最后，你可能需要使用the technique described here更新您的网页的网址，以反映手风琴面板已点击不用重新加载你的页面。

感谢您的评论Jeff – Andy 2009-12-07 23:07:50

这对我很感兴趣，但是您所描述的'技术'链接已经死亡。任何更新？ – Andrew 2013-01-18 21:27:55

答

参见：Activate Accordion Section By URL Hash

演示：found here。

TL; DR ...下面的代码：

$("#accordion").accordion({ 

    // Called when the widget instance is created. 
    create: function(e, ui) { 

     // The accordion DOM element. 
     var $this = $(this); 

     // Triggered when the browser hash changes. 
     $(window).on("hashchange", function(e) { 

       // The selector string used to find all accordion headers. 
      var headers = $this.accordion("option", "header"), 

       // The header we're looking for, based on the location hash. 
       header = $(location.hash), 

       // The index of the header we're looking for. 
       index = $this.find(headers).index(header); 

      // If there's a valid index, activate the accordion section. 
      // Otherwise, do nothing. 
      if (index >= 0) { 
       $this.accordion("option", "active", index);  
      } 

     }); 

     // Make sure this works on initial page load. 
     $(window).trigger("hashchange"); 

    } 

});

...和HTML：

<div id="accordion"> 
    <h3 id="section1">Section 1</h3> 
    <div> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3 id="section2">Section 2</h3> 
    <div> 
    <p> 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
    suscipit faucibus urna. 
    </p> 
    </div> 
    <h3 id="section3">Section 3</h3> 
    <div> 
    <p> 
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
    <h3 id="section4">Section 4</h3> 
    <div> 
    <p> 
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
    mauris vel est. 
    </p> 
    <p> 
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos himenaeos. 
    </p> 
    </div> 
</div>

行之有效我的需要！

答

这里是如何做到这一点...

它会根据你是什么H3标签内更新哈希为您服务。

您还可以通过这样的...数据活动指数=“2”要做到这一点是使用的focusIn

var initAccordion = function(_t) { 
    _t.each(function() { 
     var obj = { 
      heightStyle: 'content', 
      collapsible: true, 
      beforeActivate: function(event, ui) { 
       window.location.hash = ui.newHeader.attr('id'); 
      } 
     }; 
     // preset the active tab in html [0 = first tab] 
     var attr = $(this).attr('data-active-index'); 
     obj.active = null; 
     if(attr !== null && attr !== undefined) { 
      obj.active = Number(attr); 
     } 
     // human readable ids   
     var hash = window.location.hash; 
     $(this).find('>h3').each(function(i){ 
      this.id = $(this).text().toLowerCase().replace(/[^a-z0-9]/g, function(s) { 
       var c = s.charCodeAt(0); 
       if (c == 32) return '_'; // space 
       return ''; 
      }); 
      if(hash && hash == '#'+this.id) { 
       obj.active = i; 
      } 
     }); 
     $(this).accordion(obj); 
    }); 
};initAccordion($(".accordion"));

答

最简单的方式对你的手风琴div容器设置一个属性指定的索引。

 $(function() { 
    $("#accordion").accordion({ 
     event: "focusin" 
    }); 
}); 


<div id="accordion"> 
<h3 id="section-1">Section 1</h3> 
<div> 
    <p>blaa </p> 
</div> 
<h3 id="section-2">Section 2</h3> 
<div> 
    <p>bla</p> 
</div>

您可以在同一页面或不同的页面简单地做

<a href "otherpage.html#section-1">click to go to section 1</a>

jQuery的手风琴，打开基于一个盒子HREF

相关推荐