Jquery手风琴保持菜单中未包含在菜单中的链接的状态

Question

我一直在努力获得一个手风琴来保持手风琴菜单中没有的链接的状态，并且想知道这是否可能。我正在使用 jquery-1.6.2.min.js + query-ui-1.8 .14.custom.min.js.

我创建了一个有 3 个级别的菜单。我在这里保持状态没有问题，但我想知道如何保持菜单中未包含的 url 的状态。例如，如果我单击“高级”（下面的 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();
 }
}

我收集到返回 true，当 menucookie 匹配不正确但我不知道还能做什么。你有什么建议吗？我是 n00b，所以我可能做错了所有事情。

谢谢

Answer 1

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

这是一个 3 级手风琴菜单，因此增加了复杂性 - 但它确实有效。