Superfish：点击后如何保持子菜单打开

Question

我遇到以下情况。我有一个菜单，如果有人在菜单上悬停，会出现一个子菜单，如果鼠标移出子菜单消失，现在我想要下面的内容，如果我点击子菜单中的项目，我希望子菜单在加载新页面时保持打开状态。我为此使用了superfish Jquery插件。

这是可能的，如果如何。

我在HTML代码

<div id="nav"> 
     <div id="nav2"> 
      <ul class="sf-menu sf-navbar "> 
       <li> 
             <a title="HOME" class="sf-with-ul " href="/index.php?r=site/index&amp;sid=1">HOME</a>    </li> 
      </ul> 
      <ul class="sf-menu sf-navbar"> 
       <li> 

        <a href="?sid=2" id="gallery" class="sf-with-ul selected_main">GALLERY</a> 
        <ul class="subs" id="sub1"><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Kitchens" href="/index.php?r=images/sddsd&amp;id=1">Kitchens</a></li><li><a title="Vanities" href="/index.php?r=images/sddsd&amp;id=2">Vanities</a></li></ul>    </li>  
      </ul> 
      <ul class="sf-menu sf-navbar "> 
       <li> 
        <a href="?sid=3" class="sf-with-ul " >ACCESSORIES</a> 
             <ul class="subs" id=""><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Door Handles" href="/index.php?r=images/sddsd&amp;id=2">Door Handles</a></li><li><a title="Spanners" href="/index.php?r=images/sddsd&amp;id=1">Spanners</a></li></ul>    </li> 
      </ul> 

      <ul class="sf-menu sf-navbar "> 
       <li> 
             <a title="CONTACT US" class="sf-with-ul " href="/index.php?r=site/contact&amp;sid=4">CONTACT US</a>    </li> 
      </ul> 
     </div> 

</div> 

，然后 的快鱼代码

$(function(){ 
      $("ul.sf-menu").superfish({ 
       delay:   0, 
       speed:   'fast', 
       autoArrows: false, 
       dropShadows: false 
      }); 
     }); 

我也注意到了下面的CSS代码用于显示项目

left: 0; 
top: 2.5em; 
z-index:  99; 

Answer 1

我为您发布a demo。基本上我已经为superfish函数添加了一个“onHide”函数，然后增加了一些使菜单保持不变的编码。

额外的CSS（为默认suckerfish.css）

.sf-menu li.sfSelected { 
background-color: #CFDEFF; 
} 

脚本

$(function(){ 
    var menu = $("#nav"); 

    menu.find("ul.sf-menu") 
     .superfish({ 
      delay:   0, 
      speed:   'fast', 
      autoArrows: false, 
      dropShadows: false, 
      onHide:  function(){ 
       if (this.parent().is('.sfPersist')) { 
        this.show().css('visibility','visible').parent().addClass('sfHover'); 
       } 
      } 
     }) 
     .find('li > ul > li').click(function(){ 
      // hide previously persistent children (LOL that just sounds wrong) 
      menu.find('.sfPersist') 
       .removeClass('sfPersist sfHover') 
       .find('> ul').hide().css('visibility','hidden'); 

      // add children that should be persistent 
      if ($(this).is('.sfSelected')) { 
       // if previously selected, keep hidden 
       menu.find('li.sfSelected').removeClass('sfSelected'); 
      } else { 
       // Hide other selected classes 
       menu.find('li.sfSelected').removeClass('sfSelected'); 
       // if newly selected, then show 
       $(this) 
        .addClass('sfSelected') // remember which one is selected 
        .parent() 
        .show().css('visibility','visible') 
        .parent().addClass('sfHover sfPersist'); 
      } 
     }); 
});