Question

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

我唯一能得到的问题是，如何在默认情况下关闭第一个手风琴？

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>

谢谢，克里斯

更新

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

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

Answer 1

你需要做的是用...初始化你的手风琴。

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

...然后在

中移动“active hash accordion”代码

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

Answer 2

看看手风琴的collapsible property。它被定义为：

是否可以立即关闭所有部分。允许折叠活跃部分。

使用它的代码是：

$('#accordion').accordion({ collapsible: true });

Answer 3

使用属性active:false正常工作

演示：http://jsfiddle.net/robschmuecker/Tajhr/

http://api.jqueryui.com/accordion/#option-active

$accordion.accordion({
        active: false,
        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'));
            });
        }
    });

Jquery手风琴 - 用href链接打开

更新

3 个答案: