隐藏菜单(jquery，css）

Hidden menu (jquery, css)

本文关键字：css jquery 隐藏菜单      更新时间：2023-09-26

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

屏幕：https://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);

如果我说对了你的意思，那么这应该会对你有所帮助：

删除

.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() {}
    )
});
相关文章：