如何让我的网站在刷新后记住我的 Jquery 手风琴菜单状态？答案

【问题标题】：How to make my website remember my Jquery accordion menu state after refresh?如何让我的网站在刷新后记住我的 Jquery 手风琴菜单状态？
【发布时间】：2014-01-29 00:26:23
【问题描述】：

我找到了嵌套 Jquery 手风琴的代码，它的工作原理就像一个魅力，但我发现了一个大问题，当我单击侧边栏中的菜单或子菜单（重定向到不同 url 的链接）时，站点不记得哪个菜单或子菜单刷新后应该显示或隐藏（默认状态是隐藏除 1level ul 之外的所有内容）。有什么选项可以让我的菜单记住刷新前的最后状态吗？非常感谢您的帮助。

HTML：

<ul>
    <li>
        <a href="foo1.php">level 2</a>
        <ul>
            <li><a href="foo2.php">a</a></li>
            <li><a href="foo3.php">b</a></li>
        </ul>
    </li>
    <li>
        <a href="foo4.php">level 2</a></li>
        <ul>
            <li>
                <a href="foo5.php">level 3</a>
                <ul>
                    <li><a href="foo6.php">c</a></li>
                    <li><a href="foo7.php">d</a></li>
                </ul>
            </li>

            <li><a href="foo8.php">e</a></li>
            <li><a href="foo9.php">f</a></li>
        </ul>
    </li>
</ul>

jquery：

$('ul li ul').hide();
$('ul li').click(function(ev) {
  $(this).find('>ul').slideToggle();
  ev.stopPropagation();
});

真正的 HTML：

<ul class="arrows_list1-1">
   <h3>Naše produkty</h3>
   <div class="menu-produkty-container">
      <ul id="menu-produkty" class="menu">
         <li id="menu-item-97" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-97">
            <a href="http://www.odsavacky.cz/wpccategories/akce/">Akce</a>
            <ul class="sub-menu" style="display: none;">
               <li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-114">
                  <a href="http://www.odsavacky.cz/wpccategories/akcni-ceny/">Akční ceny</a>
               </li>
               <li id="menu-item-98" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-98">
                  <a href="http://www.odsavacky.cz/wpccategories/novinky/">Novinky</a>
               </li>
            </ul>
         </li>
         <li id="menu-item-63" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories current-wpccategories-ancestor current-menu-ancestor current-menu-parent current-wpccategories-parent menu-item-has-children menu-item-63">
            <a href="http://www.odsavacky.cz/wpccategories/spotrebni-material/">Spotřební materiál</a>
            <ul class="sub-menu" style="display: none;">
               <li id="menu-item-66" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-66">
                  <a href="http://www.odsavacky.cz/wpccategories/kyslikova-terapie/">Kyslíková terapie</a>
                  <ul class="sub-menu" style="display: none;">
                     <li id="menu-item-67" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-67">
                        <a href="http://www.odsavacky.cz/wpccategories/kyslikove-masky-a-nosni-sondy/">Kyslíkové masky a nosní sondy</a>
                     </li>
                     <li id="menu-item-176" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-176">
                        <a href="http://www.odsavacky.cz/wpccategories/masky-inhalacni/">Masky inhalační</a>
                     </li>
                     <li id="menu-item-68" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-68">
                        <a href="http://www.odsavacky.cz/wpccategories/mikronebulizatory/">Mikronebulizátory</a>
                     </li>
                     <li id="menu-item-179" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-179">
                        <a href="http://www.odsavacky.cz/wpccategories/prutokomery/">Průtokoměry</a>
                     </li>
                     <li id="menu-item-180" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-180">
                        <a href="http://www.odsavacky.cz/wpccategories/redukcni-ventily/">Redukční ventily</a>
                     </li>
                     <li id="menu-item-178" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-178">
                        <a href="http://www.odsavacky.cz/wpccategories/prislusenstvi-k-tep-nebulizatorum/">Příslušenství k tep. nebulizátorům</a>
                     </li>
                     <li id="menu-item-175" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-175">
                        <a href="http://www.odsavacky.cz/wpccategories/kyslikove-zvlhcovace-prislusenstvi/">Kyslíkové zvlhčovače, příslušenství</a>
                     </li>
                     <li id="menu-item-181" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-181">
                        <a href="http://www.odsavacky.cz/wpccategories/studene-nebulizatory-prislusenstvi/">Studené nebulizátory, příslušenství</a>
                     </li>
                  </ul>
               </li>
               <li id="menu-item-73" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-73">
                  <a href="http://www.odsavacky.cz/wpccategories/resuscitace-intubace/">Resuscitace, intubace</a>
                  <ul class="sub-menu" style="display: none;">
                     <li id="menu-item-189" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-189">
                        <a href="http://www.odsavacky.cz/wpccategories/laryngoskopy/">Laryngoskopy</a>
                     </li>
                     <li id="menu-item-188" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-188">
                        <a href="http://www.odsavacky.cz/wpccategories/laryngealni-masky/">Laryngeální masky</a>
                     </li>
                     <li id="menu-item-190" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-190">
                        <a href="http://www.odsavacky.cz/wpccategories/masky-resuscitacni/">Masky resuscitační</a>
                     </li>
                     <li id="menu-item-192" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-192">
                        <a href="http://www.odsavacky.cz/wpccategories/rucni-resuscitatory/">Ruční resuscitátory</a>
                     </li>
                     <li id="menu-item-191" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-191">
                        <a href="http://www.odsavacky.cz/wpccategories/prislusenstvi-defibrilace/">Příslušenství defibrilace</a>
                     </li>
                  </ul>
               </li>
               <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-71">
                  <a href="http://www.odsavacky.cz/wpccategories/odsavani/">Odsávání</a>
                  <ul class="sub-menu" style="display: none;">
                     <li id="menu-item-182" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-182">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-cevky/">Odsávací cévky</a>
                     </li>
                     <li id="menu-item-183" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-183">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-hadice/">Odsávací hadice</a>
                     </li>
                     <li id="menu-item-184" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-184">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-lahve/">Odsávací lahve</a>
                     </li>
                     <li id="menu-item-185" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-185">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-vaky/">Odsávací vaky</a>
                     </li>
                     <li id="menu-item-186" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-186">
                        <a href="http://www.odsavacky.cz/wpccategories/saci-filtry/">Sací filtry</a>
                     </li>
                     <li id="menu-item-187" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-187">
                        <a href="http://www.odsavacky.cz/wpccategories/stopventily/">Stopventily</a>
                     </li>
                  </ul>
               </li>
               <li id="menu-item-70" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-70">
                  <a href="http://www.odsavacky.cz/wpccategories/narkotizace-umela-plicni-ventilace/">Narkotizace, umělá plicní ventilace</a>
               </li>
               <li id="menu-item-64" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories current-menu-item menu-item-64">
                  <a href="http://www.odsavacky.cz/wpccategories/diagnostika/">Diagnostika</a>
               </li>
               <li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-65">
                  <a href="http://www.odsavacky.cz/wpccategories/ekg-prislusenstvi/">EKG – příslušenství</a>
               </li>
               <li id="menu-item-69" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-69">
                  <a href="http://www.odsavacky.cz/wpccategories/monitoring-defibrilace/">Monitoring, defibrilace</a>
               </li>
               <li id="menu-item-72" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-72">
                  <a href="http://www.odsavacky.cz/wpccategories/operacni-svetla/">Operační světla</a>
               </li>
            </ul>
         </li>
         <li id="menu-item-75" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-75">
            <a href="http://www.odsavacky.cz/wpccategories/zdravotnicke-pristroje/">Zdravotnické přístroje</a>
            <ul class="sub-menu" style="display: none;">
               <li id="menu-item-76" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-76">
                  <a href="http://www.odsavacky.cz/wpccategories/kyslikova-terapie-zdravotnicke-pristroje/">Kyslíková terapie</a>
               </li>
               <li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-77">
                  <a href="http://www.odsavacky.cz/wpccategories/resuscitace-intubace-zdravotnicke-pristroje/">Resuscitace, intubace</a>
               </li>
            </ul>
         </li>
         <li id="menu-item-74" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-74">
            <a href="http://www.odsavacky.cz/wpccategories/vyukovy-program/">Výukový program</a>
         </li>
         <li id="menu-item-62" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-62">
            <a href="http://www.odsavacky.cz/wpccategories/nahradni-dily/">Náhradní díly</a>
         </li>
      </ul>
   </div>
</ul>

真正的 Jquery：

$('.arrows_list1-1 li ul').hide();
    $('.arrows_list1-1 li').click(function(ev) {
        $(this).find('>ul').slideToggle();
        ev.stopPropagation();
    });

【问题讨论】：

记住打开了哪个子菜单的另一种方法是检查当前页面的window.location并在ul中搜索相应的锚点。如果那是您当前的 HTML 标记，我可以编写一些代码。你能发布一些真实的 URL 示例吗？

标签： javascript jquery html css ajax

【解决方案1】：

我们将检查当前 URL 并打开：

当前网址的对应级别
所有家长.sub-menu
他的兄弟.sub-menu

代码：

$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

var url = window.location.href;
var $current = $('.arrows_list1-1 li a[href="' + url + '"]');
$current.parents('.sub-menu').slideToggle();
$current.next('.sub-menu').slideToggle();

【讨论】：

如果我还有 4 个声望点，我会为你的回答竖起大拇指。好，易于。感谢您的努力和时间。
不客气。不要忘记接受您最终使用的答案。
这很干净。
顺便说一句，你已经在 UL 中有 style="display: none;"。隐藏它们的第一行是不必要的。

【解决方案2】：

将最后一个选项卡存储在会话变量中。请参阅此处的 MSDN 文档：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

【讨论】：

晚上好，是否有解决方法，例如将活动添加到菜单或子菜单并检查菜单或子菜单在刷新后是否处于活动状态或为空？如果向元素添加类很难或不可能。对于那些从未在会话、cookie 或 JavaScript 中的两个变量中存储 Jquery 手风琴状态的人，您能否用语言告诉我。如何使用它或添加到会话变量中的内容。非常感谢。

【解决方案3】：

首先，为您的手风琴的每个级别指定一个类名，如下所示。此外，设置手风琴每个级别的 onclick 以设置点击内容的 cookie，以便我们可以跟踪我们在手风琴中的位置。

<ul class="accordion">
  <li>
    <a href="foo1.php" class="lvl1" onClick="setcookie(this)">level 1</a>
    <ul>
      <li class="lvl1" onClick="setcookie(this)"><a href="foo2.php">a</a></li>
      <li class="lvl1" onClick="setcookie(this)"><a href="foo3.php">b</a></li>
    </ul>
  </li>
  <li>
  <a href="foo4.php" class="lvl2" onClick="setcookie(this)">level 2</a>
    <ul>
      <li class="lvl2">
        <a href="foo5.php" class="lvl2" onClick="setcookie(this)">level 3</a>
        <ul>
            <li class="lvl3"><a href="foo6.php">c</a></li>
            <li><a href="foo7.php">d</a></li>
        </ul>
      </li>

      <li><a href="foo8.php">e</a></li>
      <li><a href="foo9.php">f</a></li>
    </ul>
  </li>
</ul>
function setCookie(e) {
  document.cookie="activeAccordion=" + $(e).attr('class');
}

接下来，在页面加载时，读取该 cookie 并将活动手风琴设置为我们在 cookie 中设置的内容。

$(function(){
  var activeAccordion = getCookie('activeAccordion');
  $('.' + activeAccordion).closest('ul').slideToggle();
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

【讨论】：

感谢您的回答，但我尝试了没有 Jquery UI 手风琴的方法。有没有没有 Jquery UI 手风琴的解决方法？原因是因为我的 wordpress 主题与 Jquery UI 手风琴关系不好。如果这会花费您很多时间，请不要回答这个问题。

【解决方案4】：

在点击时设置一个cookie

$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
    document.cookie="activeAccordion=" + $(ev).attr('id');
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

在文档准备好后，读取该 cookie 并设置正确的级别。

$(function(){
  var activeAccordion = getCookie('activeAccordion');
  $('#' + activeAccordion).closest('ul').slideToggle();
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

【讨论】：

【解决方案5】：

您可以在手风琴状态从默认值更改时将其存储在 cookie 中，然后在页面刷新时将其读回。

【讨论】：