Question

我正在尝试展示最初关闭的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>

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

演示here

修改
（打开和关闭）

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

演示here

Answer 2

您需要做的就是：

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

激活选项设置活动＆＃34;面板＆＃34;手风琴如果（假）没有＆＃34;小组＆＃34;很活跃。

然后点击面板＆＃34;激活＆＃34;选项将设置为此＆＃34;面板＆＃34;索引。

jQuery手风琴与关闭菜单

2 个答案: