我正在为我的主管设计的客户建立一个网站。早期，我们决定我们的导航将基于 jQuery TreeView 菜单 ( http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm )。
最初，我的主管喜欢 TreeView 导航的外观和功能。但是在我安装并构建了导航之后，他们改变了主意。现在他们只想要分支的外观，但具有下拉菜单的基本功能。
我不是 jQuery 专家，所以编辑代码对我来说非常困难。但我已经让它做我想做的事了——有一个例外。我希望子菜单在鼠标移出时消失，但它们会一直保留在那里，直到您将鼠标移动到另一个元素。有没有办法使用我拥有的框架来做到这一点，或者我应该从头开始重建并使其全部基于 CSS？
另一种选择是保持每个主导航链接的悬停状态处于活动状态，直到您移动到另一个链接。此时，作为连接分支的背景图像在鼠标移出时消失，而子菜单则不会。
我基本上只是希望主菜单项的背景图像在子菜单框出现时出现/消失。
测试站点可以在这里看到：http: //tinyurl.com/7novfmc
这是我的CSS：
#navigation a {
color:#666;
text-decoration:none;
}
#navigation a:hover {
color:#C93;
text-decoration:none;
}
.navlink a:hover {
color:#C93;
text-decoration:none;
background-image:url(../images/treeview-horizontal-line.png);
background-repeat:no-repeat;
background-position:right;
padding-right:17px;
}
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color: #FFF;
margin-top: 4px;
}
.treeview .hitarea {
/*background: url(../images/treeview-default.gif) -64px -25px no-repeat;*/
height: 16px;
width: 16px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
display: inline;
float:none;
}
.treeview li {
margin: 0;
padding: 12px 0pt 16px 16px;
text-transform: lowercase;
font-size: .75em;
}
.treeview a.selected {
background-color: #eee;
}
#treecontrol {
margin: 1em 0;
display: none;
}
.treeview .hover {
color: #C93;
cursor: pointer;
}
.treeview li ul li {
background: url(../images/treeview-orange-line1.png) 0 10px no-repeat;
font-size: 1em;
margin-top:-24px;
}
.treeview li.collapsable, .treeview li.expandable {
background-position: 0 -176px;
}
.treeview .expandable-hitarea {
background-position: -80px -3px;
}
.treeview li.last {
background-position: 0 -1766px
}
.treeview li.lastCollapsable, .treeview li.lastExpandable {
}
.treeview li.lastCollapsable {
background-position: 0 -111px
}
.treeview li.lastExpandable {
background-position: -32px -67px
}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
background-position: 0;
}
.treeview-famfamfam li {
background-image: url(../images/treeview-famfamfam-line.gif);
}
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable {
background-image: url(../images/treeview-famfamfam.gif);
}
.filetree li {
padding: 3px 0 2px 16px;
}
.filetree span.folder, .filetree span.file {
padding: 1px 0 1px 16px;
display: block;
}
.filetree span.folder {
background: url(../images/folder.gif) 0 0 no-repeat;
}
.filetree li.expandable span.folder {
background: url(../images/folder-closed.gif) 0 0 no-repeat;
}
.filetree span.file {
background: url(../images/file.gif) 0 0 no-repeat;
}
这是我的 HTML（带有一些内联 CSS）：
<div id="HEADER_NAVIGATION">
<div id="MAIN_NAVIGATION">
<ul id="navigation">
<li style="margin-left:60px;"><span class="navlink"><a href="about.html">About</a></span>
<ul style="margin-left:40px;margin-top:-32px;position:fixed;">
<li>Our Approach</li>
<li>Experience</li>
<li>Global Reach</li>
</ul>
</li>
<li style="margin-left:75px;"><a href="principals.html">Principals</a></li>
<li style="margin-left:90px;"><span class="navlink"><a href="offerings.html">Offerings</a></span>
<ul style="margin-left:60px;margin-top:-34px;position:fixed;">
<li>Performance Improvement</li>
<li>Organizational Transformation</li>
<li>Solutions Architecture</li>
<li>Risk Management</li>
</ul>
</li>
<li style="margin-left:75px;"><span><a href="testimonials.html">Testimonials</a></span>
<ul style="margin-left:70px;margin-top:-3px;position:fixed;">
<!--<li>Case Studies</li>-->
</ul>
</li>
<li style="margin-left:60px;"><span class="navlink"><a href="resources.html">Resources</a></span>
<ul style="margin-left:65px;margin-top:-13px;position:fixed;">
<li>Strategic Alliances</li>
<li>Publications</li>
</ul>
</li>
</ul>
</div>
<div id="MAIN_HEADER_IMAGE"></div>
</div>
这是我的jQuery：
$(document).ready(function(){
// first example
$("#navigation").treeview({
collapsed: true,
unique: true,
persist: "location"
});
});
;(function($) {
$.extend($.fn, {
swapClass: function(c1, c2) {
var c1Elements = this.filter('.' + c1);
this.filter('.' + c2).removeClass(c2).addClass(c1);
c1Elements.removeClass(c1).addClass(c2);
return this;
},
replaceClass: function(c1, c2) {
return this.filter('.' + c1).removeClass(c1).addClass(c2).end();
},
hoverClass: function(className) {
className = className || "hover";
return this.hover(function() {
$(this).addClass(className);
}, function() {
$(this).removeClass(className);
});
},
heightToggle: function(animated, callback) {
animated ?
this.animate({ height: "toggle" }, animated, callback) :
this.each(function(){
jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "show" ](); // default here is "show" : "hide"
if(callback)
callback.apply(this, arguments);
});
},
heightHide: function(animated, callback) {
if (animated) {
this.animate({ height: "hide" }, animated, callback);
} else {
this.hide();
if (callback)
this.each(callback);
}
},
prepareBranches: function(settings) {
if (!settings.prerendered) {
// mark last tree items
this.filter(":last-child:not(ul)").addClass(CLASSES.last);
// collapse whole tree, or only those marked as closed, anyway except those marked as open
this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
}
// return all items with sublists
return this.filter(":has(>ul)");
},
applyClasses: function(settings, toggler) {
this.filter(":has(>ul):not(:has(>a))").find(">span").hover(function(event) {
toggler.apply($(this).next());
}).add( $("a", this) ).hoverClass();
if (!settings.prerendered) {
// handle closed ones first
this.filter(":has(>ul:hidden)")
.addClass(CLASSES.expandable)
.replaceClass(CLASSES.last, CLASSES.lastExpandable);
// handle open ones
this.not(":has(>ul:hidden)")
.addClass(CLASSES.collapsable)
.replaceClass(CLASSES.last, CLASSES.lastCollapsable);
// create hitarea
this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>").find("div." + CLASSES.hitarea).each(function() {
var classes = "";
$.each($(this).parent().attr("class").split(" "), function() {
classes += this + "-hitarea ";
});
$(this).addClass( classes );
});
}
// apply event to hitarea
this.find("div." + CLASSES.hitarea).mouseout( toggler );
},
treeview: function(settings) {
settings = $.extend({
cookieId: "treeview"
}, settings);
if (settings.add) {
return this.trigger("add", [settings.add]);
}
if ( settings.toggle ) {
var callback = settings.toggle;
settings.toggle = function() {
return callback.apply($(this).parent()[0], arguments);
};
}
// factory for treecontroller
function treeController(tree, control) {
// factory for click handlers
function handler(filter) {
return function() {
// reuse toggle event handler, applying the elements to toggle
// start searching for all hitareas
toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() {
// for plain toggle, no filter is provided, otherwise we need to check the parent element
return filter ? $(this).parent("." + filter).length : true;
}) );
return false;
};
}
// click on first element to collapse tree
$("a:eq(0)", control).click( handler(CLASSES.collapsable) );
// click on second to expand tree
$("a:eq(1)", control).click( handler(CLASSES.expandable) );
// click on third to toggle tree
$("a:eq(2)", control).click( handler() );
}
// handle toggle event
function toggler() {
$(this)
.parent()
// swap classes for hitarea
.find(">.hitarea")
.swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
.swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
.end()
// swap classes for parent li
.swapClass( CLASSES.collapsable, CLASSES.expandable )
.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
// find child lists
.find( ">ul" )
// toggle them
.heightToggle( settings.animated, settings.toggle );
if ( settings.unique ) {
$(this).parent()
.siblings()
// swap classes for hitarea
.find(">.hitarea")
.replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
.replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
.end()
.replaceClass( CLASSES.collapsable, CLASSES.expandable )
.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
.find( ">ul" )
.heightHide( settings.animated, settings.toggle );
}
}
function serialize() {
function binary(arg) {
return arg ? 1 : 0;
}
var data = [];
branches.each(function(i, e) {
data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
});
$.cookie(settings.cookieId, data.join("") );
}
function deserialize() {
var stored = $.cookie(settings.cookieId);
if ( stored ) {
var data = stored.split("");
branches.each(function(i, e) {
$(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ]();
});
}
}
// add treeview class to activate styles
this.addClass("treeview");
// prepare branches and find all tree items with child lists
var branches = this.find("li").prepareBranches(settings);
switch(settings.persist) {
case "cookie":
var toggleCallback = settings.toggle;
settings.toggle = function() {
serialize();
if (toggleCallback) {
toggleCallback.apply(this, arguments);
}
};
deserialize();
break;
case "location":
var current = this.find("a").filter(function() { return this.href.toLowerCase() == location.href.toLowerCase(); });
if ( current.length ) {
current.addClass("selected").parents("ul, li").add( current.next() ).show();
}
break;
}
branches.applyClasses(settings, toggler);
// if control option is set, create the treecontroller and show it
if ( settings.control ) {
treeController(this, settings.control);
$(settings.control).show();
}
return this.bind("add", function(event, branches) {
$(branches).prev()
.removeClass(CLASSES.last)
.removeClass(CLASSES.lastCollapsable)
.removeClass(CLASSES.lastExpandable)
.find(">.hitarea")
.removeClass(CLASSES.lastCollapsableHitarea)
.removeClass(CLASSES.lastExpandableHitarea);
$(branches).find("li").andSelf().prepareBranches(settings).applyClasses(settings, toggler);
});
}
});
// classes used by the plugin
// need to be styled via external stylesheet, see first example
var CLASSES = $.fn.treeview.classes = {
open: "open",
closed: "closed",
expandable: "expandable",
expandableHitarea: "expandable-hitarea",
lastExpandableHitarea: "lastExpandable-hitarea",
collapsable: "collapsable",
collapsableHitarea: "collapsable-hitarea",
lastCollapsableHitarea: "lastCollapsable-hitarea",
lastCollapsable: "lastCollapsable",
lastExpandable: "lastExpandable",
last: "last",
hitarea: "hitarea"
};
// provide backwards compability
$.fn.Treeview = $.fn.treeview;
})(jQuery);
谢谢你的帮助！