我的想法非常简单。我有一个菜单栏，由3个项目的无序列表组成。每个项目都有一个与标题重合的图像。我在Photoshop上添加了每个图标的“活动”版本。每次列出项目时，我都希望img的src更改为“active”图标。但是我也希望点击“活动”图标。
我对如何编写它有一个大概的想法，但我从来没有使用过bind（）或unbind（）
我想知道编写以下内容的正确方法：
function nav_handler() {
$(".nav_services").hover(function() {
var src = $(".nav_services img").attr("src", "files/img/services2.png");
$(".nav_services").mousedown(function() {
$(this).unbind(hover);
});
}, function() {
var src = $(".nav_services img").attr("src", "files/img/services.png");
});
};
我认为这个问题不需要任何HTML或CSS，但如果需要，我会发布它。这是3个类中的1个（列表项）的示例，因此我不知道您是否可以使用它的父级并使用children（）并根据其中某个子项的返回值更改图标或点击了，但这会更有帮助。
更新
好的，所以我正确使用了unbind，但列表项中img的src只会改变一次。这意味着如果我一次单击一个，src将只更改一次。这是我目前正在使用的全部功能：
function beta_handler() {
//Hover for Nav-item #1 (Services)
$(".nav_services").hover(function () {
var src = $(".nav_services img").attr("src", "files/img/services2_active.png");
$(".nav_services").mousedown(function () {
if ($(".nav_home").hasClass("nav_active")) {
$(".nav_home").removeClass("nav_active");
var src = $(".nav_home img").attr("src", "files/img/home2.png")
$(this).addClass("nav_active");
//$(this).unbind("hover");
$(this).unbind("mouseenter mouseleave");
}
else if ($(".nav_contact").hasClass("nav_active")) {
$(".nav_contact").removeClass("nav_active");
var src = $(".nav_contact img").attr("src", "files/img/contact2.png")
$(this).addClass("nav_active");
//$(this).unbind("hover");
$(this).unbind("mouseenter mouseleave");
}
});
}, function () {
var src = $(".nav_services img").attr("src", "files/img/services2.png");
});
//Hover for Nav-item #2 (Home)
$(".nav_home").hover(function () {
var src = $(".nav_home img").attr("src", "files/img/home2_active.png");
$(".nav_home").mousedown(function () {
if ($(".nav_services").hasClass("nav_active")) {
$(".nav_services").removeClass("nav_active");
var src = $(".nav_services img").attr("src", "files/img/services2.png")
$(this).addClass("nav_active");
//$(this).unbind("hover");
$(this).unbind("mouseenter mouseleave");
}
else if ($(".nav_contact").hasClass("nav_active")) {
$(".nav_contact").removeClass("nav_active");
var src = $(".nav_contact img").attr("src", "files/img/contact2.png")
$(this).addClass("nav_active");
//$(this).unbind("hover");
$(this).unbind("mouseenter mouseleave");
}
});
}, function () {
var src = $(".nav_home img").attr("src", "files/img/home2.png");
});
//Hover for Nav-item #3 (Contact)
$(".nav_contact").hover(function () {
var src = $(".nav_contact img").attr("src", "files/img/contact2_active.png");
$(".nav_contact").mousedown(function () {
if ($(".nav_services").hasClass("nav_active")) {
$(".nav_services").removeClass("nav_active");
var src = $(".nav_services img").attr("src", "files/img/services2.png")
$(this).addClass("nav_active");
//$(this).unbind("hover");
$(this).unbind("mouseenter mouseleave");
}
else if ($(".nav_home").hasClass("nav_active")) {
$(".nav_home").removeClass("nav_active");
var src = $(".nav_home img").attr("src", "files/img/home2.png")
$(this).addClass("nav_active");
//$(this).unbind("hover");
$(this).unbind("mouseenter mouseleave");
}
});
}, function () {
var src = $(".nav_contact img").attr("src", "files/img/contact2.png");
});
};
答案 0 :(得分：1)
hover函数实际上是一种快捷方法。它绑定mouseenter和mouseleave。要删除绑定，您需要取消绑定两个事件（demo）：
$('button').hover(function(){
$(this).addClass('red');
}, function(){
$(this).removeClass('red');
}).click(function(){
$(this).unbind('mouseenter mouseleave');
});
更新：您尝试做的所有事情都可以使用CSS完成（demo） - 无需使用javascript / jQuery复杂化。
HTML
<div id="nav_container">
<ul>
<li class="nav_services"><i></i>SERVICES</li>
<li class="nav_home nav_active"><i></i>HOME</li>
<li class="nav_contact"><i></i>CONTACT</li>
</ul>
</div>
CSS
#nav_container li {
background: #fff;
border-color: #b6b5ba;
}
#nav_container li:hover {
background: #dfdeff;
}
#nav_container li.nav_active {
background-color: #cecdf6;
}
#nav_container i {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px;
display: inline-block;
vertical-align: top;
}
.nav_services i {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-cog-outline-128.png);
}
.nav_services.nav_active i, .nav_services:hover i {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-cog-128.png);
}
.nav_home i {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-contact-outline-128.png);
}
.nav_home.nav_active i, .nav_home:hover i {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-contact-128.png);
}
.nav_contact i {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-telephone-outline-128.png);
}
.nav_contact.nav_active i, .nav_contact:hover i {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-telephone-128.png);
}
#nav_container {
width: 70%;
margin: 20px 0 0 15%;
height: 40px;
background-color: #ffffff;
border: 1px #b6b5ba solid;
border-radius: 2px;
}
#nav_container ul {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: table;
table-layout: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav_container li {
font-family: Calibri, Verdana;
display: table-cell;
line-height: 40px;
list-style-type: none;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav_services {
border-right: 1px #dedede solid;
}
.nav_home {
border-left: 1px #dedede solid;
border-right: 1px #dedede solid;
}
.nav_contact {
border-left: 1px #dedede solid;
}
更新2：我不确定您的标签系统是如何工作的，但您需要一些脚本来添加或删除nav_active类名称：
$(function () {
$('#nav_container li').click(function () {
$(this)
.addClass('nav_active')
.siblings()
.removeClass('nav_active');
});
});
答案 1 :(得分：0)