隐藏菜单（jQuery，CSS）

Question

Patient: http://demo.imatte.us/fomru/project_people.html

Screen: http://i.stack.imgur.com/GkBST.png

Hidden menu works incorrect. After click on link, menu shows, but after 'mouseover' it disappears. I need to disable this, and hide menu just after click out of menu.

(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

If I got right what do you mean, then this should help you:

remove

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

and add this:

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