1

我正在尝试展示一个最初关闭的 jQuery 手风琴。现在，当您打开页面时，第一个选项卡会打开，我希望它默认关闭并在单击选项卡时打开。

任何帮助表示赞赏。

<style>
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;
width:960px;}

#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}

#accordion li.active {
width: 450px;
}
</style>

<ul id="accordion">
  <li>
    <img src="images/section_1.png" />
    <strong>Section 1 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
  </li>
  <li>
    <img src="images/section_2.png" />
    <strong>Section 2 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
  </li>
  <li>
    <img src="images/section_3.png" />
    <strong>Section 3 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
  </li>
  <li>
    <img src="images/section_4.png" />
    <strong>Section 4 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function(){


activeItem = $("#accordion li:first");
$(activeItem).addClass('active');

$("#accordion li").click(function(){
    $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
    $(this).animate({width: "450px"}, {duration:300, queue:false});
    activeItem = this;
});

});
</script>
4

2 回答 2

1

由于您的选择器依赖于一个变量activeItem，您只需要先定义它，而不需要将类添加active到第一个元素。

试试这个：

$(document).ready(function(){
var activeItem;
$("#accordion li").click(function(){
    $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
    $(this).animate({width: "450px"}, {duration:300, queue:false});
    activeItem = this;
});
});

演示在这里

编辑：（
打开和关闭）

$(document).ready(function(){
    var activeItem;
    $("#accordion li").click(function(){
        if(activeItem == this){
            $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
             activeItem = '';
        }else{ 
            $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
            $(this).animate({width: "450px"}, {duration:300, queue:false});
            activeItem = this;
        } 
    });
});

演示在这里

于 2013-09-16T17:16:33.160 回答
0

您需要做的就是：

$(document).ready(function()
{
    $( "#accordion" ).accordion({ active: false });
}

如果（假）没有“面板”处于活动状态，则选项 active 设置手风琴的活动“面板”。

然后单击面板时，“活动”选项将设置为此“面板”索引。

于 2013-09-16T17:18:10.467 回答