Question

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

这是我的网址

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

Answer 1

哦，我看到Jeff报告说当前的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') );
    });
  }
});

Answer 2

坏消息是手风琴插件目前已被打破（截至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来更新您网页的网址，以反映点击哪个手风琴小组而不重新加载您的网页。

Answer 3

最简单的方法是使用focusin。

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

您只需执行

即可从同一页面或其他页面进行href

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

Answer 4

请参阅： 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>

很好地满足了我的需求！

Answer 5

这是怎么做的......

它会根据h3标签内的内容为您更新哈希值。

你也可以通过在你的手风琴容器div上设置一个属性来指定索引... data-active-index =“2”

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"));

jquery手风琴，打开一个基于href的盒子

5 个答案: