我已经开发了这个菜单,带有li元素的sub ul滑入和滑出,用toggle()点击父li。如果显示另一个子ul,则sctipt将其关闭。这与标准链接相当不错,但我想用ajax请求替换链接点击,如果页面没有改变,点击嵌套的li链接,使相对子菜单被克隆。
我想在单击链接时阻止子菜单关闭。我试图将点击功能从LI移动到SPAN,但我找不到正确的方法。
javascript:
(function($){
$.fn.extend( {
verticalfade: function(options){
var defaults = {
speed: 'normal'
};
var options = $.extend(defaults, options);
$(this).addClass('verticalFadeMenu');
//close all sub menu
$('ul#verticalfade li ul').each(function(){
$('ul#verticalfade li ul').hide();
});
//toggle sub menu
$('ul#verticalfade li').live('click',function(){
var t = this;
$('ul#verticalfade li').each(function(){
if (this != t)
{
if($(this).children('ul').is(":visible"))
{
$(this).children('ul').toggle(800);
}
}
else
{
$(this).children('ul').toggle(800);
}
});
})
//manage links
$("ul#verticalfade li ul li a").click(function(e){
//prevent default action
e.preventDefault();
});
}
});})(jQuery);
html:
<div id="verticalfade_container">
<ul id="verticalfade">
<li><span>First</span>
<ul>
<li><a href="test1.html">Link 1</a></li>
<li><a href="test2.html">Link 2</a></li>
</ul>
</li>
<li><span>Second</span>
<ul>
<li><a href="test1.html">Link 1</a></li>
<li><a href="test2.html">Link 2</a></li>
</ul>
</li>
</ul>
</div>
答案 0 :(得分:10)
我认为停止事件冒泡可能会对您有所帮助。试着看看下面是否有效
$("ul#verticalfade li ul li a").click(function(e){
e.stopPropagation();
});
OR
$("ul#verticalfade li ul li a").click(function(e){
return false; // should cancel default action as well as event bubbling.
});