jQuery與已關閉菜單的手風琴

我試圖展示一個最初關閉的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>

來源

2013-09-16 Mauricio

不會刪除'$（activeItem）.addClass（'active'）'做到這一點？ – j08691

我嘗試過，但我認爲該行只是將「active」類添加到打開的選項卡中。我想知道是否必須添加一行來告訴它保持關閉狀態，直到它被提示打開。 – Mauricio

因爲你的選擇取決於變量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

來源

2013-09-16 17:16:33 Sergio

這太棒了！有沒有辦法關閉活動項目並將其摺疊到默認狀態？ – Mauricio

@Mauricio是的，使用'$（「＃accordion li」）。animate（{width：「50px」}，{duration：300，queue：false}）;' - 你沒有使用jQuery的手風琴功能，你做一個自定義動畫，所以你需要在所有'#accordion li'上使用它來使它恢復正常'' – Sergio

對不起，Sergio它沒有倒塌。我把這條線放在$（document）.ready（function（）{line。）這是否正確？ – Mauricio

所有你需要做的是這樣的：

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

選項激活集手風琴如果（假）沒有「面板」的活動「面板」被激活。

然後點擊一個面板，「激活」選項將被設置爲這個「面板」索引。

來源

2013-09-16 17:18:10 Sebastien

jQuery與已關閉菜單的手風琴

回答

相關問題