这是我目前的代码,我已经尝试了一个多小时了:
$('#menu_list').bind('mouseenter mouseleave click', function(event){
if(event.type == 'click') {
$('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
$('#add_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/add_inactive.png)');
$('#search_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/search_inactive.png)');
$('#list_text').css('color', 'black');
$('#add_text').css('color', '#C0C0C0');
$('#search_text').css('color', '#C0C0C0');
} else if(event.type == 'mouseenter') {
$('#list_text').css('color', 'black');
$('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
} else if(event.type == 'mouseleave') {
$('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_inactive.png)');
}
});
它应该做的是当我悬停时,图标会发生变化。但是当我点击时,图标会一直处于活动状态,直到我点击另一个项目为止。 mouseenter / mouseleave没有问题。问题始于点击。点击后,它完成工作,但在移动鼠标时,鼠标离开功能激活。意味着图标再次变为非活动状态。
答案 0 :(得分:1)
首先,你为什么要在jQuery中这么复杂?为什么不使用基于css类的系统。
让你的css像这样(显然可以根据需要更改;)
.normal { color:#000; background-image: url(foo.jpg) }
.click { color:#2B2B2B; background-image: url(foo.jpg) }
.mouseIn { color:#F00; background-image: url(foo.jpg) }
.mouseOut { color:#FFF; background-image: url(foo.jpg) }
然后使用jQuery
$('#menu_list').click(function() {
$('#list_img').addClass("click");
$('#add_text').addClass("example");
});
$('#menu_list').mouseenter(function() {
$('#list_img').addClass("mouseIn");
});
$('#menu_list').mouseleave(function() {
$('#list_img').addClass("mouseOut");
});
我知道你还需要删除类吗?您可以使用名为addClass
的{{1}}的反面。您可以将它们放在上面显示的函数中
答案 1 :(得分:1)
首先,我建议你为了可分离这些事件而编写3个独立的事件处理程序。
其次,list_clicked
是什么?变量似乎超出了范围,因此未定义并始终为真。检查元素上的类,这更容易......
第三:将所有这些样式放入一些css类(例如我的例子中的active
和clicked
),这使得整个事情变得非常简单。
这样的事情应该有效:
$('#menu_list').click(function() {
/* alternate the classes by clicking - the class "clicked" is there to indicate
that it has been activated by click and won't be removed by mouseout*/
$(this).toggleClass("active clicked");
});
$('#menu_list').mouseenter(function() {
/* Just add the "active" class */
$(this).addClass("active");
});
$('#menu_list').mouseleave(function() {
/* If the element has not been clicked...*/
if (!$(this).hasClass("clicked")){
/*...remove the "active" class */
$(this).removeClass("active");
}
});
CSS-classes看起来像这样:
.active #list_img{
background-image:url(<?=base_url()?>/assets/css/images/list_active.png);
}
.active #list_text{
color:black;
}
答案 2 :(得分:0)
对于初学者来说,你正在检查变量list_clicked,它似乎没有在你的点击处理程序中设置 - 这意味着!list_clicked将始终返回true ...所以这可能没有帮助。
答案 3 :(得分:0)
var activeItem;
$('#menu_list').bind('mouseenter mouseleave click', function(event){
if(event.type == 'click') {
$('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
$('#add_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/add_inactive.png)');
$('#search_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/search_inactive.png)');
$('#list_text').css('color', 'black');
$('#add_text').css('color', '#C0C0C0');
$('#search_text').css('color', '#C0C0C0');
activeItem = this;
} else if(event.type == 'mouseenter') {
$('#list_text').css('color', 'black');
$('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
} else if(event.type == 'mouseleave' && !list_clicked) {
if(activeItem != this) {
$('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_inactive.png)');
}
}
});
您只需要跟踪活动项目。