0
我使用这个jQuery的菜单脚本:jQuery的菜单
(function($) {
$.fn.blowfish = function() {
// hide original ul dom tree
$(this).hide();
// create container from top-level li tags
var top = $(this).children('li');
var container = $('<div/>').addClass('bfcontainer').attr('id', 'cv' + Math.floor(Math.random()*10e10)).insertAfter(this);
var topdiv = $('<div class="top"></div>').appendTo(container);
// check if IE and set fixed width for first column
if($.browser.msie) {
$('.top').width('200px');
}
$.each(top, function(i, item) {
var topitem = $(':eq(0)', item).clone().data('sub', $(item).children('ul')).appendTo(topdiv);
if($(topitem).data('sub').length) {
$(topitem).addClass('hasChildMenu');
if($.browser.safari) {
$(topitem).css({'margin-right' : '15px'});
}
}
});
// event handlers
$('a', container).live('click', function() {
var container = $(this).parents('.bfcontainer');
// click handler
var level = $('div', container).index($(this).parents('div'));
// remove blocks to the right in the tree, and 'deactivate' other links within the same level
$('div:gt('+level+')', container).remove();
$('div:eq('+level+') a', container).removeClass('active').removeClass('inpath');
$('.active', container).addClass('inpath');
$(this).addClass('active');
if($(this).data('sub').children('li').length) {
// add submenu if container has children
submenu(container, this);
}
else {
// show title or link if container has no children
var title = $('<a/>').attr({href : $(this).attr('href')}).text($(this).attr('title') ? $(this).attr('title') : $(this).text());
var featurebox = $('<div/>').html(title).addClass('feature').appendTo(container);
// set width
var remainingspace = 0;
$.each($(container).children('div').slice(0, -1), function(i, item) {
remainingspace += $(item).width();
});
var fillwidth = $(container).width() - remainingspace;
$(featurebox).css({'top': 0, 'left' : remainingspace}).width(fillwidth).show('slow');
}
return false;
});
};
// create submenus
function submenu(container, item) {
var leftPos = 0;
$.each($(container).children('div'), function(i, mydiv) {
leftPos += $(mydiv).width();
});
var submenu = $('<div/>').css({'top' : 0, 'left' : leftPos}).appendTo(container).fadeIn();
// check if IE and set fixed width for submenu column
if($.browser.msie) {
$(submenu).width('200px');
}
var subitems = $(item).data('sub').children('li');
$.each(subitems, function(i, subitem) {
var subsubitem = $(':eq(0)', subitem).clone().data('sub', $(subitem).children('ul')).appendTo(submenu);
if($(subsubitem).data('sub').length) {
$(subsubitem).addClass('hasChildMenu');
if($.browser.safari) {
$(subsubitem).css({'margin-right' : '15px' });
}
}
});
}
})(jQuery);
原来的DOM树是这样的:
<ul>
<li>
<a href="#">Item</a>
<ul>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 2</a>
<ul>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Item 4</a>
</li>
</ul>
jQuery的脚本添加一个新列的每个子菜单(比如Mac OS X发现者),我想修改它,所以如果没有更多的子菜单,它实际上获得链接的href属性,并像一个正常行为(我使用AJAX加载内容到另一个div如果你点击一个项目没有子项目,所以我不能在脚本本身使用window.location,而是必须禁用返回fa在那个特定的情况下。我该怎么做呢?
你可以在这里查看工作示例:http://mxms.me/blowfish
非常感谢。