超級魚：單擊后如何保持子菜單打開

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>

然后是superfish代碼

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

我還注意到以下css代碼用於顯示項目

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

Answer 1

我為您發布了一個演示 。 基本上，我在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');
            }
        });
});