用戶單擊並懸停鏈接時如何添加和刪除類

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