jQuery 与封闭菜单一致

jQuery accordian with closed menu

本文关键字：菜单 jQuery      更新时间：2023-09-26

我正在尝试呈现一个最初关闭的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>

由于您的选择器依赖于变量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;
        } 
    });
});

在这里演示

您需要做的就是：

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

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

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

相关文章：