隐藏菜单(jquery,css)

时间:2014-09-12 10:15:33

标签: javascript jquery html css

患者: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);

1 个答案:

答案 0 :(得分:2)

如果我说对了你的意思,那么这应该对你有帮助:

删除

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