Jquery手风琴将状态保存在菜单中，以查找菜单中未包含的链接

Question

我一直在努力获得一个手风琴，以保持在手风琴菜单中没有的链接之间的状态，并且想知道它是否可能，我正在使用jQuery1.6.2.min.js+ query-ui-1.8.14.custom.min.js。

我已经创建了一个有三个层次的菜单。我在这里保持状态没有问题，但我想知道如何保持不包含在菜单中的url状态。例如，如果我单击'Advanced‘(下面的html代码)，它将正确显示手风琴菜单和正确选择的菜单项。然而，这个‘高级’页面有随后的单独页面。现在我的想法是，如果这些后续页面之一被点击，那么在手风琴菜单中的‘高级’链接应该保持选中，因此‘高级’将继续显示。

我认为，这样做的唯一方法是使用jquery.cookie，如果单击菜单url，则cookie将使用菜单项的url更新。如果一个不在菜单中的url被点击-- cookie将不会被更新，但是原始菜单项将保持显示。然而，我不能让这件事起作用。

我利用了navigationFilter在手风琴功能和其他各种方式，但没有运气。

菜单html如下所示：

<div class="submenu">
 <ul id="accordion">
  <h3 class="h3"><a href="#">System Setup</a></h3> 
   <div> 
     <ul id="accordion-syssetup"> 
      <!-- System setup menu --> 
      <li> 
        <a href="#" class="accheader">Setup</a> 
        <ul> 
          <li><a  href="/advanced.php">Advanced</a></li> 
          <li><a  href="/general.php">General</a></li> 
        </ul> 
      </li> 
      <li> 
        <a  href="#" class="accheader">Tools</a> 
        <ul> 
          <li><a  href="/nslookup.php">Nslookup</a></li> 
          <li><a  href="/ping.php">Ping</a></li> 
        </ul>
      </li> 
      <li> 
       <a  href="/system_hosts.php">Hosts</a> 
      </li> 
     </ul> 
   </div> 

<h3 class="h3"><a href="#">Security</a></h3> 
 <div> 
  <ul id="accordion-security"> 
  <!-- Security menu --> 
   <li> 
    <a  href="#" class="accheader">User Management</a> 
    <ul> 
     <li><a  href="/user.php">Users</a></li> 
     <li><a  href="/groups.php">Groups</a></li> 
    </ul> 
   </li> 
   <li><a  href="/certs.php">Certificates</a></li> 
  </ul> 
 </div>
</div>

jquery如下：

var $j = jQuery.noConflict();
$j().ready(
    function(){

            // Set the cookie
            var currentURL = window.location.toString().split("/");
            var currentURL = currentURL[currentURL.length-1];
            if ($j.cookie('menu') == null) {
                    $j.cookie('menu', currentURL, { expires: null, path: '/'} );
            }
            var menucookie = $j.cookie('menu');

            // Top level
            $j("#accordion").accordion({
                    header: 'h3.h3',
                    autoHeight: false,
                    navigation: true,
                    collapsible: true,
                    alwaysOpen: false,
                    active: false
            });
            // Second level
             $j("#accordion-syssetup").accordion({
                    header: "a.accheader",
                    navigation: true,
                    clearStyle: true,
                    autoHeight: false,
                    collapsible: true,
                    alwaysOpen: false,
                    animated: 'slide'
             });
            $j("#accordion-security").accordion({
                    header: "a.accheader",
                    navigation: true,
                    clearStyle: true,
                    autoHeight: false,
                    collapsible: true,
                    alwaysOpen: false,
                    animated: 'slide'
            });

            $j("#accordion").addClass("ui-widget ui-helper-reset");
            $j("#accordion").removeClass("ui-accordion").find('h3.h3').removeClass("ui-accordion-header");


            var currentURL = window.location.toString().split("/");
            var currentURL = currentURL[currentURL.length-1];
            if (!currentURL || currentURL == '') {
                currentURL = 'index.php';
            }
            $j("#accordion:has(a)").each ( function () {
                    if ( currentURL ) {
                            $j('a[href$="' + currentURL + '"]').addClass("sb-menu-active");
                    }
            });


            // Keep track of the cookie
            $j("#accordion a").each ( function () {
                    url = this.toString().split("/");
                    url = url[url.length-1];
                    if($j('a[href$="' + url + '"]').hasClass("sb-menu-active") == true) {
                            hasclass = true;
                            $j.cookie('menu', currentURL, { expires: null, path: '/'} );
                            menucookie = $j.cookie('menu');
                            return false;
                    }
            });

            // Display the menu
            $j(".submenu").show();
    }
);

您会注意到，在上面，我也增加和删除某些类别的化妆品原因。我还为活动菜单链接添加了一个类。我已经从上面删除了navigationFilter，但是我确实尝试了以下几点：

navigationFilter: function () {
 //Accordion NavigationFilter
 var locationHrefArray = location.href.split("/");
 var locationLastString = locationHrefArray[locationHrefArray.length - 1].toLowerCase();


 if ( this.href.toLowerCase() == locationLastString ) {
  return true;
 } else if (locationLastString.match( menucookie )) {
  return true;
 } else {
  return this.href.toLowerCase() == location.href.toLowerCase();
 }
}

我认为回归是真的，当菜鸟的比赛是不正确的，但我不知道还能做些什么。你有什么意见建议？我是n00b，所以我可能做得不对。

谢谢

Answer 1

好的，这是另一种方式，重写了大部分手风琴和html。使用cookie，我可以安全地打开我想要的手风琴部分。如果单击菜单中的一个链接，它将更新cookie，否则菜单中没有链接的任何页面都不会导致cookie被更新，而是保留上一个值。cookies值用于激活菜单的相关部分。

这是一个三级手风琴菜单，因此增加了复杂性-但它的工作。