Superfish: Comment garder le sous-menu ouvert après avoir cliqué sur

Question

Je vais avoir le scénario suivant. J'ai un menu et si l'on survole le menu un sous-menu apparaît et si la souris disparaît le sous-menu disparaît, maintenant je veux ce qui suit si je clique sur l'un sur un élément dans le sous-menu, je veux le sous-menu reste ouvert, lorsque la nouvelle page a été chargée. J'utilise super-plugin Jquery pour cela.

Est-ce possible et si comment.

mon code 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> 

puis le code superfish

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

J'ai aussi remarqué que le code CSS suivant est utilisé pour afficher l'élément

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

Answer 1

Je poste a demo pour vous. Fondamentalement, j'ai ajouté une fonction "onHide" à la fonction superfish, puis un codage supplémentaire qui maintient le menu persistant.

CSS supplémentaires (à défaut suckerfish.css)

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

Script

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