Php Superfish:单击子菜单后如何保持其打开状态
我有下面的场景。我有一个菜单,如果鼠标悬停在菜单上,就会出现一个子菜单,如果鼠标移出子菜单,子菜单就会消失,现在我想要下面的内容如果我点击子菜单中的某个项目,我想要在加载新页面时子菜单保持打开状态。我正在使用superfish Jquery插件来实现这一点 这有可能吗?如果有,怎么办 我的html代码Php Superfish:单击子菜单后如何保持其打开状态,php,jquery,css,jquery-plugins,Php,Jquery,Css,Jquery Plugins,我有下面的场景。我有一个菜单,如果鼠标悬停在菜单上,就会出现一个子菜单,如果鼠标移出子菜单,子菜单就会消失,现在我想要下面的内容如果我点击子菜单中的某个项目,我想要在加载新页面时子菜单保持打开状态。我正在使用superfish Jquery插件来实现这一点 这有可能吗?如果有,怎么办 我的html代码 <div id="nav"> <div id="nav2"> <ul class="sf-menu sf-navbar "&g
<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&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&id=1">Kitchens</a></li><li><a title="Vanities" href="/index.php?r=images/sddsd&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&id=2">Door Handles</a></li><li><a title="Spanners" href="/index.php?r=images/sddsd&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&sid=4">CONTACT US</a> </li>
</ul>
</div>
</div>
我还注意到以下css代码用于显示该项
left: 0;
top: 2.5em;
z-index: 99;
我替你发帖。基本上,我已经在superfish函数中添加了一个“onHide”函数,然后添加了一些额外的代码来保持菜单的持久性
附加CSS(默认为suckerfish.CSS)
剧本
$(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');
}
});
});
完美的这很有效。我正在使用Drupal库。我只是将脚本粘贴到superfish.js中,没有使用函数包装器,效果非常好。感谢您发布此解决方案。
.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');
}
});
});