javascript - 隐藏菜单(jquery，css)

Question

患者:http://demo.imatte.us/fomru/project_people.html

屏幕:http://i.stack.imgur.com/GkBST.png

隐藏菜单不正确。单击链接后，菜单显示，但在“鼠标悬停”后消失。我需要禁用它，并在点击菜单后立即隐藏菜单。

(function($) {
    $(function(){
        var $judgments = $('.project .jugdments-list .item');
        $judgments.each(function(){
            limit($(this).find('.title'), 140);
            limit($(this).find('.text'), 200);
        });

        var $filters = $('.filters-list>li');
        $filters.each(function(){
            var $filter = $(this);
            var $filterBody = $filter.find('.filter');
            $filter.find('.filter-name').click(function(){
                $('.filters-list .filter').not($filterBody).fadeOut();
                $filterBody.fadeToggle();
            });
        });
        $(document).click(function(e){
            if ( !$(e.target).closest('.filters-list').length || $(e.target).is('.filters-list') ) {
                $('.filters-list .filter').fadeOut();
            }
        });
    });

    function limit($elem, length) {
        var text = $elem.text();
        if ( text.length > length ) {
            $elem.text(text.slice(0, 140)+'…');
        }
    }
})(jQuery);

Answer 1

如果我没看错你的意思，那么这应该对你有帮助:

删除

.filters .filters-list>li:hover .filter {
    display: block;
}

并添加:

$('.filter-name').each(function() {
    var that = $(this);
    that.hover(
        function() {
            $('.filters-list .filter').not(that.parent().find('.filter')).fadeOut();
            that.parent().find('.filter').fadeIn();
        },
        function() {}
    )
});