2011-07-04 40 views
0

我一直在争取让手风琴保持跨越不在手风琴菜单的链接的状态,并且怀疑它是否可能。我正在使用jquery- 1.6.2.min.js + query-ui-1.8.14.custom.min.js。Jquery手风琴保持菜单状态菜单中不包含在菜单内的链接

我创建了一个有3个级别的菜单。我在这里保持状态没有问题,但我想知道如何保持菜单中不包含的url的状态。例如,如果我点击'高级'(下面的html代码),它会正确显示手风琴菜单和正确选择的菜单项。然而,这个“高级”页面随后有单独的页面。现在我的想法是,如果点击其中一个后续页面,则手风琴菜单中的“高级”链接应保持选中状态,因此“高级”将继续显示。

我收集到这样做的唯一方法就是利用jquery.cookie,如果点击菜单url,那么cookie将被更新为菜单项的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所以我可能会做一切不正确。

感谢

回答

0

好做了另一种方式,并改写了大部分的手风琴和HTML的。使用cookie,我可以安全地打开我想要的手风琴部分。 如果菜单中的某个链接被点击,它会更新cookie,否则任何没有菜单链接的页面都不会导致cookie被更新,但会保留以前的值。 Cookie值用于激活菜单的相关部分。

这是一个3级的手风琴菜单,所以增加了复杂性 - 但它的工作原理。