Mik*_*ike 1 jquery jquery-plugins toggle
我已经开发了这个菜单,带有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);
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
Vin*_*ayC 10
我认为停止事件冒泡可能会对你有所帮助.试着看看下面是否有效
$("ul#verticalfade li ul li a").click(function(e){
e.stopPropagation();
});
Run Code Online (Sandbox Code Playgroud)
要么
$("ul#verticalfade li ul li a").click(function(e){
return false; // should cancel default action as well as event bubbling.
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
5580 次 |
| 最近记录: |