Question

我一直在努力让手风琴在不在手风琴菜单中的链接上保持状态并想知道它是否可能。我使用的是jquery-1.6.2.min.js + query-ui-1.8 .14.custom.min.js。

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

我认为这样做的唯一方法就是使用jquery.cookie，如果点击菜单网址，则会使用菜单项的网址更新cookie。如果点击了菜单中没有的网址，则不会更新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。使用cookies，我可以安全地打开我想要的手风琴部分。如果单击菜单中的某个链接，它会更新cookie，否则菜单中没有链接的任何页面都不会导致cookie更新但保留以前的值。 Cookie值用于激活菜单的相关部分。

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

Jquery手风琴在菜单中保存状态，用于菜单中未包含的链接

1 个答案: