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
非常感謝。