被修改

Question

我有一个菜单项列表，当用户在hover 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/

问题是，如果用户点击了＆＃39; li＆＃39;该类添加到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 Demo

但是你的要求仍然不清楚在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>

Here是一个更新的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效果发生时{{1}删除了类。我的建议是创建一个与active相同的新课程active1，当您点击某个颜色时，颜色确实只会改变，active效果不会从中删除活动课程因为它首先不在那里。

mouseout

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

尝试创建另一个名为＆＃34的css类;点击＆＃34;并在点击时添加该类，并在悬停时激活。

$('#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');
            });

如何在用户点击并悬停链接时添加和删除课程

7 个答案:

被修改