用户单击并悬停链接时如何添加和删除类

Question

我有一个菜单项列表，当用户单击任何li 或在悬停li上添加类时，我想添加相同的类。

我有一个菜单项，如下所示：

$('#menu li').click(function() {
    $('#menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

$("#menu li").hover(
                function () {
                    $(this).addClass('active');
                }, 
                function () {
                    $(this).removeClass('active');
                });

http://jsfiddle.net/866pzu47/173/

问题是，如果用户单击“ li”，则将添加到li的类单击鼠标悬停时，我需要删除添加的类。由于上次用户单击或再次添加了活动的iems。

Answer 1

这是一种简单的方法

$('#menu li').click(function() {
    $('#menu li').removeClass('active');
    $(this).addClass('active');
});

$("#menu li").hover(function () {
    $('#menu li').removeClass('active');
    $(this).addClass('active');
});

jsFiddle演示

但是，您对使用jsFiddle的需求仍然不清楚，因此请看一看，让我们知道您在其中的确切要求。

已编辑

我刚刚添加了不同的类，一个用于单击活动，另一个用于悬停活动，因此请尝试悬停，然后单击，您会发现两个功能之间存在差异

<script>
$('#menu li').click(function() {
    $('#menu li').removeClass('clickactive hoveractive');
    $(this).addClass('clickactive');
});

$("#menu li").hover(function () {
    $('#menu li').removeClass('hoveractive clickactive');
    $(this).addClass('hoveractive');
});
</script>

<style>
.hoveractive{
    color:red;
}  
.clickactive{
    color: green;
}
</style>

这是更新的jsFiddle。

Answer 2

function myfun() {
    $('#menu li').removeClass('active');
    $(this).addClass('active');
}
$('#menu li').click(myfun);
$("#menu li").hover(myfun);

与上述相同，但不保留重复...

Answer 3

这将适用于您

$(document).ready(function(){

  $('#menu li').click(function() {
  $('#menu li').removeClass('active');
  $(this).addClass('active');
});

$("#menu li").hover(function(){
   $('#menu li').removeClass('active');
   }, function(){
   $(this).addClass('active');
   });
})

Answer 4

在单击和悬停时添加类不是一个好主意。 似乎您尝试在移动设备和台式机上具有功能。

尝试根据屏幕尺寸检查文档宽度和运行代码。

var docWidth = $(window).width();

if (docWidth <= 767) {
    $('#menu li').click(function() {
        $('#menu li').not(this).removeClass('active');
        $(this).addClass('active');
    });
}
else {
    $('#menu li').click(function() {
        $(this).addClass('active');
    }, function() {//note add callback function
        $(this).removeClass('active');
    });
}

Answer 5

你没有意识到这一点，但您的$('#menu li').click事件实际上是调用和类不改变，但你悬停出的li在mouseout效应发生与active类被删除。 我的建议是创建一个新的active1类，它与单击li时的active类相同，只是这次更改的颜色不会改变，因为mouseout效果不会从中删除active类，因为它最初并不存在。

           $("#menu li").click(function () {
                $("#menu li").not(this).removeClass("active1");
                $(this).addClass("active1");
            });

            .active1{
                color: red;
            }

Answer 6

如果您想悬停但active类仍在那儿，则可以使用该类，并且还可以减少脚本功能。

 $('#menu li').click(function() { $('#menu li').not(this).removeClass('active'); $(this).addClass('active'); }); 

 li{ color: blue; } li:hover{ color: red; } .active{ color:red; //background-image:''; } .active{ color:red; //background-image:''; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu"> <li>one</li> <li>one</li> <li>one</li> </ul> 

Answer 7

尝试创建另一个名为“ clicked”的css类，并在单击时添加该类，并在悬停时将其激活。

$('#menu li').click(function() {
    //alert("chala BC");
$('#menu li').not(this).removeClass('clicked');
$(this).addClass('clicked');
});

$("#menu li").hover(
            function () {
                $(this).addClass('active');
            }, 
            function () {
                $(this).removeClass('active');
            });