Question

我使用的是jQuery手风琴，我有一个问题。

如果在我的函数中启动jQuery，我使用active: 0,它工作正常，当我进入手风琴页面时，我的第一支手风琴打开了。

但是当我使用active: false,时，当我进入手风琴页面时，或者当我刷新此页面时，我总是看到我的最后一支手风琴缩回。

我试图使用active: false,，因为当我进入手风琴页面时，我看到所有手风琴都关闭了，但是当我进入页面时我不想看到这种缩回效果。

你知道为什么我会因此而出错吗？

这是我的HTML：

 <div class="accordion ative">
     <h3><a href="#">Title 1</a></h3>
           <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
           </ul>
</div>         

 <div class="accordion ative">
     <h3><a href="#">Title 2</a></h3>
           <ul>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
           </ul>
</div>

这是我的jQuery：

$(function() {
   $('.accordion').accordion({
    active: 2,   
    collapsible: true,
    heightStyle: "content",
    icons: { header: 'ui-icon-plus', activeHeader: 'ui-icon-minus'}
});
$('.accordion.ative').accordion({
    active: false,   
    collapsible: true,
});

 $('.accordion.spo').accordion({
    active: 0,   
    collapsible: true, 
    heightStyle: "content",

});
});

Answer 1

你应该通过id而不是类来调用手风琴，你是多次初始化手风琴。你的jQuery类选择器将匹配多个手风琴。给每个手风琴一个id，并为每个手风琴配置按#id选择每个手风琴。

$(function() {
  $('#accordion1').accordion({
    active: 2,   
    collapsible: true,
    heightStyle: "content",
    icons: { header: 'ui-icon-plus', activeHeader: 'ui-icon-minus'}
   });

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


});


    <div id="accordion1" class="accordion ative">
        <h3><a href="#">Title 1</a></h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </div>

    <div id="accordion2" class="accordion ative">
        <h3><a href="#">Title 2</a></h3>
        <ul>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </div>

当我访问我的手风琴页面时，我看到我的上一个手风琴<h3>收缩，当我使用`active：false，`</h3>

1 个答案: