单击菜单项保持悬停效果

Question

我创建了一个具有.hover效果的导航栏。 但是我希望我使用.click时添加或保留的效果，并且单击其他栏时也希望删除该效果。 抱歉造成混淆:)

我的代码是这样的

HTML：

<div id="menubar">
    <div class="menubutton">Home</div>
    <div class="menubutton">Dessert</div>
    <div class="menubutton">About Us</div>
</div>

CSS：

#menubar {
    height: 30px;
    width: 100%;
    background-color: gray;
}

.menubutton {
    height: 30px;
    width: 60px;
    background-color: gray;
    display: inline-block;
    color: black;
    transition: background-color 0.5s ease;
}

.active {
    height: 30px;
    width: 60px;
    background-color: white;
    color: red;
}

jQuery的：

$('.menubutton').hover(function() {
    $(this).addClass('active');
},
function() {
    $(this).removeClass('active');
});

Answer 1

添加点击处理程序，

$('.menubutton').click(function() {
    $('.menubutton.active').removeClass('active')
    $(this).addClass('active');
});

小提琴演示

Answer 2

创建新的class activeClick for click事件，因为active类将在悬停事件上删除：-

$(function(){
 $('.menubutton').click(function(){    
   $('.menubutton').removeClass('activeClick');
   $(this).addClass('activeClick');
  });
});

演示

Answer 3

未经测试，只需在编辑器中将其编写为：

$(document).on('ready', function() {
    $('.menubutton').on('click', function() {
        $('.menubutton').removeClass('active clicked');
        $(this).addClass('active clicked')
    }).on('mouseenter', function() {
        $('.menubutton.active').not('.clicked').removeClass('active');
        $(this).addClass('active')
    }).on('mouseleave', function() {
        $(this).not('.clicked').removeClass('active')
    });
});

Answer 4

尝试这个 ：

$('.menubutton').click(function() {
    $('.menubutton').not(this).removeClass('active')
    $(this).toggleClass('active');
});

演示