在基於Cookie的切換菜單上需要幫助

Question

我寫了一個基於cookie的切換顯示/隱藏菜單。 它記住使用jQuery cookie插件打開/關閉的內容。 它確實工作正常； 唯一的問題是我必須為每個菜單添加不同的腳本。 因此，每個菜單都有其自己的腳本。

到目前為止，這是代碼：

jQuery的

$(document).ready(function() {
var panel = $("#f1_fold");
var button = $("#f1_fold_i");
var initialState = "expanded";
var activeClass = "hidden";
var visibleText = "<img src='html/sys-img/min.gif' alt='-' />";
var hiddenText = "<img src='html/sys-img/plus.gif' alt='+' />";


if($.cookie("panelState1") == undefined) {
    $.cookie("panelState1", initialState);
}
var state = $.cookie("panelState1");
if(state == "collapsed") {
    panel.hide();
    button.html(hiddenText);
    button.addClass(activeClass);
}

button.click(function(){
    if($.cookie("panelState1") == "expanded") {
        $.cookie("panelState1", "collapsed");
        button.html(hiddenText);
        button.addClass(activeClass);
    } else {
        $.cookie("panelState1", "expanded");
        button.html(visibleText);
        button.removeClass(activeClass);
    }
    panel.slideToggle("1000");
    return false;
});
});

這是HTML片段

<div class="tableborder"> 
      <div class='maintitle'> 
      <div style='float: right; width: auto !important; padding-right: 6px; padding-left: 3px;'><a id='f1_fold_i' id='1' href='#' style='vertical-align:middle; border:0px solid #000; cursor:pointer;' /><img src='html/sys-img/min.gif' alt='-' /></a></div> 
<div><img src='style_images/1/nav_m.gif' border='0'  alt='&gt;' width='8' height='8' />&nbsp;<a href="index.php?c=1">Gotei 13</a></div> 
</div> 
      <span id='f1_fold' style='display:;'> 
      <table width="100%" border="0" cellspacing="1" cellpadding="4">  
        <tr>
          <th align="left" colspan="2" width="59%" class='titlemedium'>Forum</th> 
          <th align="right" width="14%" class='titlemedium'>Stats</th> 
          <th align="left" width="25%" class='titlemedium'>Last Post Info</th> 
        </tr> 
<tr> 
          <td class="row4" align="center"><img src='subnonew.gif' border='0'  alt='No New Posts' /></td>   
          <td class="row4"><b class="dtitle"><a href="index.php?showforum=1">Rules &amp; Announcement Board</a></b><br /><span class="desc">Pengumuman, panduan, dan peraturan forum dipajang di sini. Baru daftar? Yuk tengok dulu sebelum posting~<br /></span></td> 
          <td class="row2" align="right">58 Topics <br />1410 Replies</td> 
          <td class="row2" nowrap="nowrap"> 
<a href='index.php?showtopic=2069&amp;view=getlastpost' title='Go to last post'><img src='http://209.85.62.23/style_images/1/lastpost.gif' border='0'  alt='Last Post' /></a> 
Today at 01:59 am<br />In:&nbsp;<a href='index.php?showtopic=2069&amp;view=getnewpost' title='[INFO] Gelar Jepang UI 2011 (Go to first unread)'>[INFO] Gelar Jepang UI 2011</a><br />By: <a href='index.php?showuser=1'>Xaliber</a> <br />Thread: <a href='index.php?showforum=36'>Gathering &amp; Events</a></td> 
        </tr> </table></span><table width="100%"><tr> 
          <td class='darkrow2' colspan="5">&nbsp;</td> 
        </tr> 
      </table> 

    </div> 

注意，我必須為每個菜單添加不同的腳本，因為它取決於f1_fold和f1_fold_i CSS ID。 對於其他菜單，它將為f2_fold和f2_fold_i 。 另一個是f3_fold和f3_fold_i 。 等等。

此外，為了使該cookie記住哪些菜單被折疊和打開菜單，它也取決於panelState1 （對於第一個菜單）， panelState2 （對於第2）， panelState3等

有什么辦法可以使它更短，更靈活？ 所以我不必添加其他變量

Answer 1

如果您將每個菜單都包裝在一個帶有'menuWrapper'類（或類似名稱）的div中，然后使用jQuery的'each'函數 ，則可以在每個菜單上執行一個函數。 將您的“ xf_fold”和“ xf_fold_i” ID更改為“ f_fold”和“ f_fold_i”類。 然后，在每個菜單項上運行的功能中，您可以根據類選擇它們。 像這樣的小提琴就可以解決問題。

更新資料

這是一個新的小提琴，展示了基於cookie的選定項目記憶解決方案。

Answer 2

一年后，雖然沒有完全達到我的意思，但我發現使用可折疊的jQuery插件更為實用。