jQuery手风琴-使用href链接打开 [英] Jquery Accordion - opening with href link

问题描述

我在stackoverflow的帮助下创建了一个脚本.

I created a scrip with some help of stackoverflow.

此刻我的代码看起来像

<script type="text/javascript">
$(function() {
    $( "#accordion" ).accordion();
    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: true,
      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') );
        });
      }
    });
  });
  </script>

我唯一的问题是，如何默认关闭第一手风琴?

The only question I've got, how can i close the first Accordion by default?

HTML:

<div id="accordion">
<h3><a href="#link1">Link1</a></h3>
<div>content</div>

<h3><a href="#link2">Link2</a></h3>
<div>content</div>
</div>

谢谢， 克里斯

我现在删除了第三行-代码如下:

I deleted now the third line - the Code looks like:

<script type="text/javascript">
$(function() {
    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: true,
      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') );
        });
      }
    });
  });
  </script>

推荐答案

您需要做的是使用...初始化手风琴.

What you need to do is initialize your accordion with ...

$("#accordion").accordion({ active: false, collapsible: true });  

...，然后将活动哈希手风琴"代码移入您的

... and then move the "active hash accordion" code inside of your

if (windows.location.hash)

最终看起来像这样:

$(function () 
{
    var hashId = 0,
        $accordion = $("#accordion")
                         .accordion({ active: false, collapsible: true });

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

全部折叠: http://codepen.io/anon/pen/kLbeD

链接1有效: http://codepen.io/anon /pen/kLbeD#link1

链接2有效: http://codepen.io/anon /pen/kLbeD#link2

这篇关于jQuery手风琴-使用href链接打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！