gpt4 book ai didi

php - super 鱼 : How to keep sub menu open after it has been clicked

转载 作者:塔克拉玛干 更新时间:2023-11-03 05:34:06 28 4
gpt4 key购买 nike

我遇到了以下情况。我有一个菜单,如果将鼠标悬停在菜单上,则会出现一个子菜单,如果鼠标移出,子菜单就会消失,现在我想要以下内容,如果我单击子菜单中的一个元素,我希望子菜单加载新页面时保持打开状态。为此,我正在使用 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>

然后 super 鱼代码

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

我还注意到下面的 css 代码用于显示元素

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

最佳答案

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

关于php - super 鱼 : How to keep sub menu open after it has been clicked,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2794285/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com