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'); 
      } 
     }); 
});