Javascript 带关闭菜单的jQuery手风琴

我试图展示一个最初关闭的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>  

#手风琴{
列表样式：无；
利润率：30px0；
填充：0；
高度：200px；
溢出：隐藏；
背景#7d8d96；
宽度：960px；}
#手风琴李{
浮动：左；
左边框：
显示：块；
高度：170px；
宽度：50px；
填充：15px0；
溢出：隐藏；
颜色：#fff；
文字装饰：无；
字体大小：16px；
线高：1.5em；
左边框：1px实心#fff；}
#手风琴{
边界：无；
右边框：1px实心#fff；
浮动：左；
裕度：-15px 15px 0；
}
#手风琴{
宽度：450px；
}


第1节标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。在iaculis volatic quam，非持续性累积弧。阿利夸姆·佩伦茨克。


第2节标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。在iaculis volatic quam，非持续性累积弧。阿利夸姆·佩伦茨克。


第3节标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。在iaculis volatic quam，非持续性累积弧。阿利夸姆·佩伦茨克。


第4节标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。在iaculis volatic quam，非持续性累积弧。阿利夸姆·佩伦茨克。


$（文档）.ready（函数（）{
activeItem=$（“#手风琴李：第一”）；
$（activeItem）.addClass（'active'）；
$（“#手风琴李”）。单击（函数（）{
$（activeItem）.animate（{width:50px}，{duration:300，queue:false}）；
动画（{width:450px}，{duration:300，queue:false}）；
activeItem=这个；
});
});

由于选择器依赖于变量

activeItem

，因此只需首先定义它，而无需将class

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

演示

编辑：
（打开和关闭）

---

Demo

由于选择器依赖于变量

activeItem

，因此您只需首先定义它，而无需将class

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

如果（false）没有激活“面板”，选项active将设置手风琴的激活“面板”

---

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

您只需执行以下操作：

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

如果（false）没有激活“面板”，选项active将设置手风琴的激活“面板”

---

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

不会删除

$（activeItem）。addClass（'active'）

这样做吗？我试过了，但我认为该行只是将类“活动”添加到打开的选项卡中。我想知道是否必须添加一行命令它在提示打开之前保持关闭状态。是否删除

$（activeItem）。addClass（'active'）

可以这样做？我尝试过，但我认为该行只是将类“active”添加到打开的选项卡中。我想知道我是否必须添加一行命令，告诉它在提示打开之前保持关闭。这太棒了！是否有方法关闭活动项并将其折叠到默认状态？@Mauricio是的，使用此

$（“#accordio li”）.animate（{width:“50px”}，{duration:300，queue:false}）

-您没有使用jQuery的accordion功能，您正在制作自定义动画，因此您需要在所有

#accordion li

上使用它，以使其恢复正常

，

很抱歉，Sergio它没有重新折叠。我将该行放在$（document）.ready（function（）下面{line.这是正确的吗？啊，我知道你做了什么。是否还有其他方法可以通过单击某个选项卡来使用同一按钮的功能？它似乎对我不起作用。我希望我知道更多的JavaScript来帮助开发此自定义部分。它不是打开或关闭。这太棒了！有没有方法关闭活动项并折叠它o默认状态？@Mauricio是，使用此

$（“#accordio li”）。动画（{width:“50px”}，{duration:300，queue:false}）

-您没有使用jQuery的accordion功能，您正在制作自定义动画，因此您需要在所有

#accordion li

上使用它，以便使用

使其恢复正常
。很抱歉，Sergio它没有重新折叠。我将该行放在$（文档）下面。就绪（函数（）{line.这是正确的吗？啊，我知道你做了什么。是否可以通过单击其中一个选项卡来使用相同按钮的功能？它似乎对我不起作用。我希望我知道更多的JavaScript来帮助开发此自定义部分。它不是打开或关闭。