Question

点击一个按钮后，我会看到一个meny。该按钮具有悬停效果。单击按钮后，悬停状态应保持不变，直到关闭菜单（或类切换）。

小提琴：

JS：

         //open menu
        $('.tablabel').click(function(event){
      $('.tablabel').not(this).next().removeClass("active")
       $(this).next().toggleClass("active")

    });

    //close if menu clicked
    $(".dpd").click(function(e){

    $(this).toggleClass("active")
  })

    //(!DOESNT WORK YET!) close if clicked outside meny (body)
$('html').click(function (e) {
    if (e.target.id == 'mcontainera') {
          $('.dropdowna').removeClass('active');
    } 
});

Answer 1

您可以使用mouseenter和mouseleave放置悬停类，然后在:hover

中替换css .hover

var $labels = $('.tablabel').click(function(){
    $(this).toggleClass('clicked')
}).mouseenter(function(){
    $(this).addClass('hover')
}).mouseleave(function(){
    var $this = $(this);
    if(!$this.hasClass('clicked')) $this.removeClass('hover')           
}).click(function(event){
    $(this).next().toggleClass("active")
});

//close if anything  but menu clicked
var $dpd = $(".dpd")
$(document.body).click(function (e) {
    if (!$(e.target).is('.tablabel') ){
        $dpd.removeClass('active');
        $labels.removeClass('clicked hover')
    }
});

如果您不想关闭其他菜单，请发表评论

//  $('.tablabel').not(this).next().removeClass("active")

https://jsfiddle.net/s4nk1zev/291/

保持悬停状态直到上课

1 个答案: