如何讓手風琴保持開啓狀態

如何讓手風琴選項卡保持開啓狀態，使其處於活動狀態？即，如果我在List One手風琴頁面上，那麼在進入頁面時該手風琴將被打開，並且另一個手風琴將被關閉。如何讓手風琴保持開啓狀態

我已創建a JS Fiddle我到目前爲止的位置。我嘗試了幾種不同的方法，但似乎阻止了手風琴的完全工作。

下面是代碼：

HTML

<div class="trigger-button"><span>List One</span></div> 
     <div class="accordion"> 
       <ul> 
      <li>Item One</li> 
      <li>Item Two</li> 
      <li>Item Three</li> 
      <li>Item Four</li> 
      </ul> 
     </div> 

     <div class="trigger-button"><span>List Two</span></div> 
     <div class="accordion"> 
      <ul> 
      <li>Item One</li> 
      <li>Item Two</li> 
      <li>Item Three</li> 
      <li>Item Four</li> 
      </ul> 
    </div>

CSS

.trigger-button { 
float: left; 
width: 100%; 
padding: 10px 0 10px 0; 
margin-bottom: 6px; 
text-decoration: none; 
font-weight: bold; 
box-shadow: 0 0 1px rgba(0, 0, 0, 0.17); 
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17); 
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);  
background-color: #CCC; 
border: 1px solid #000; 
color: #FFF; 
font-size: 14px; 
cursor:pointer; 
text-align: center; 
} 
.trigger-button span { 
padding-left: 0; 
} 
.trigger-button.active { 
background-color: #000; 
color: #FFF; 
} 
.accordion { 
float: left; 
padding: 8px 15px 22px 15px; 
}

$('.trigger-button').click(function() { 
    $(".trigger-button").removeClass("active") 
    $('.accordion').slideUp('normal'); 
    if($(this).next().is(':hidden') == true) { 
     $(this).next().slideDown('normal'); 
     $(this).addClass("active"); 
    } 
    }); 
    $('.accordion').hide();

在此先感謝。

來源

2013-07-16 Blue Orange

還有[jQuery UI手風琴]（http://jqueryui.com/accordion/）。如果你不想編程過去經常做的事情。 – feeela

不提我的答案。你想跟蹤多個頁面的狀態？ – DarkBee

我需要它，因此如果您在與列表1中的項目有關的頁面上，那麼當您轉到該頁面時，列表1手風琴已經打開並處於活動狀態。然後，如果您進入與列表2有關的項目頁面，那麼列表2手風琴已經開放，如果這是有道理的。 –

只需添加另一個類的部分你想成爲默認打開：

<div class="accordion open">

然後改變：

$('.accordion').hide();

要：

$('.accordion:not(.open)').hide();

來源

2013-07-16 09:22:31 David

完美的謝謝大衛。正是我在找什麼。 –

添加類似

$(this).next().toggelClass('active'); // switch .active class of the .accrodion div

在點擊後的處理程序和運行初始化上document.load：

$(document).load(function(){  
     $('.accordion').hide(); 
     $('.accordion.active').show(); 
});

然後你可以以聲明方式設置.active類你想成爲初始頁面加載後打開的選項卡。

來源

2013-07-16 09:23:04

如何讓手風琴保持開啓狀態

回答

相關問題