Question

我正在尝试做以下事项：
如果我单击导航的ul li元素（参见下面的示例），则所选的li会随着过渡效果增加100宽度。
如果我再次点击点击的 li ，其宽度不会改变但是，如果点击其他 li ，则必须将之前点击的 li 元素设置为初始宽度24px（删除活动类），如果我用鼠标悬停。<登记/> 在下面的示例中，第一个选定的li不会改变。

这是example

$(document).ready(function() {
    $('.b-square > li').click(function() {
        var linkName = $(this).data('name');
        $('.b-square > li').removeClass('active').text('');
        $(this).toggleClass('nav');
        $(this).toggleClass('active').text(linkName);
        $(this).unbind("mouseout"); //Remove mouseout event after clicking
    });

    $('.b-square > li').mouseover(function() {
        var linkName = $(this).data('name');

        //If no active class exists in the selected element, then call hover event
        if (!$(this).hasClass('active')) {
            $(this).toggleClass('nav');
            $(this).toggleClass('active').text(linkName);
        }
    });

    $('.b-square > li').mouseout(function() {
        var currentID = $(this).attr('id');
        $(this).removeClass('active').text('');
    });
});

Answer 1

而不是mouseout()使用mouseleave()，所以它会像：

一样结束

$('.b-square > li').mouseleave(function(){ var currentID = $(this).attr('id');

然后将绑定函数移除到链接元素（在单击函数内）：

$(this).unbind("mouseleave");

mouseout()用于div，而mouseleave()用于“离开”任何元素。忘记在点击时删除对事件的绑定，更新的小提琴应该工作：这是更新的fiddle

Answer 2

添加

$(".b-square > li.active").removeClass("active nav").text("").mouseout(function() {
    var currentID = $(this).attr('id');
    $(this).removeClass('active').text('');
});

致mouseover处理程序。

Working JSFiddle

Answer 3

如果我理解你想要的东西，试试这个：

$(document).ready(function() {
    $('.b-square > li').click(function() {
        var linkName = $(this).data('name');
        $('.b-square > li.selected').removeClass('selected');
        $(this).toggleClass('selected');
        $('.b-square > li:not(.selected)').removeClass('active');
        $('.b-square > li:not(.selected)').text('');
        $(this).addClass('active');
        $(this).toggleClass('nav');
        $(this).text(linkName);        

    });

    $('.b-square > li').mouseover(function() {
        var linkName = $(this).data('name');

        //If no active class exists in the selected element, then call hover event
        if (!$(this).hasClass('active')) {
            $(this).toggleClass('nav');
            $(this).toggleClass('active').text(linkName);
        }
    });

    $(document).on('mouseout','.b-square > li:not(.selected)',function() {
        var currentID = $(this).attr('id');
        $(this).removeClass('active').text('');
    });
});

我创建了一个select类来区分active（mouseover）和clicked，虽然点击的项目也使用了活动类。

工作JSFiddle

被修改

在Stevie P纠正我here之后编辑。

如果单击了第二个元素，则在悬停事件中删除单击元素的类

3 个答案:

被修改