1

这是我当前的代码，我已经尝试了一个多小时：

$('#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 没有问题。问题从点击开始。单击时，它会完成这项工作，但在移动鼠标时，mouseleave 功能会激活。意味着图标再次变为非活动状态。

4

4 回答 4

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被调用removeClass。您可以将它们放在上面显示的函数中

于 2012-07-24T08:34:53.693 回答
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 类看起来像这样：

.active #list_img{
    background-image:url(<?=base_url()?>/assets/css/images/list_active.png);
}
.active #list_text{
    color:black;
}
于 2012-07-24T08:36:16.570 回答
0

对于初学者来说，您正在检查一个变量 list_clicked，它似乎没有在您的点击处理程序中设置 - 这意味着！list_clicked 将始终返回 true...所以这可能无济于事。

于 2012-07-24T08:34:58.970 回答
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)'); 
        }
    } 
});

您只需要跟踪您的活动项目。

于 2012-07-24T08:37:35.540 回答