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（第二个），{{1等等

有没有办法让它更短更灵活？所以我不必添加不同的变量

Answer 1

如果您使用“menuWrapper”类（或类似的东西）将每个菜单包装在div中，然后使用jQuery's 'each' function，则可以在每个菜单上执行一个函数。将'xf_fold'和'xf_fold_i'id更改为'f_fold'和'f_fold_i'类。然后，在每个菜单项上运行的函数中，您可以根据类选择它们。像this fiddle之类的东西可以解决问题。

更新

这是a new fiddle演示基于cookie的选定项目记住解决方案。

Answer 2

一年之后，虽然没有达到我的意思，但我发现使用collapsible jQuery plugin更实际。

需要有关基于Cookie的切换菜单的帮助

2 个答案:

更新