JS-添加和删除标签，显示展开&收起

需求：

点击添加标签，在下方添加标签；

超过一行显示“更多”，点击“更多”展开，并显示“收起”；

展开/收起时可以删除标签，如果小于一行，隐藏“展开收起”；

 

解决方法：

一开始用的固定一行height的高度，css来控制height：auto 和固定值切换，overflow-y：hidden；后来发现不满足需求；

后来就改成通过offset().top的值来区分第一行和其他行（添加other-row作为标识控制）了，总觉得应该还会有更简单的方法；

 

关键代码：

<script>
var selectedArray = selectTag();//选中后传回来的数据
                    $(".j-content-taglist").find("li").remove();//清空原先的标签
                    $(".j-content-taglist").next("a").remove();//清除原有的“展开/收起”
                    selectedArray.forEach(function(a, i) {
                        $(".j-content-taglist").append('<li class="mcs-courseTagList__item">' +
                            '<span class="mcs-courseTagList__text" data-id="'+a.id+'">'+a.ename+'</span>' + 
                            '<a href="javascript:;" class="mcs-courseTagList__close  j-close"><i class="ico-close"></i></a></li>');
                    })
                    $('.j-selected-employee').show(function(){
                        $(".j-content-taglist li").each(function(){
                            var top = $(this).position().top;
                            if(top>0){
                                $(this).addClass('other-row');//非第一行标注other-row
                            }
                        })
                        if($('.other-row').length!==0){
                            $('.j-selected-employee').append('<a href="javascript:;" class="more-btn j-more"><span>更多</span> <i class="arrow arrow-down"></i></a>');
                        }
                        $('.j-content-taglist .other-row').hide();
                    });
</script>

<script>
     //展开
$('body').on('click','.j-more',function () {
    $(this).parent().find('.other-row').show();
    $(this).after('<a href="javascript:;" class="more-btn j-fold"><span>收起</span> <i class="arrow arrow-up"></i></a>');
    $(this).remove();
    
});
//收起
$('body').on('click','.j-fold',function () {
    $(this).parent().find('.other-row').hide();
    $(this).after('<a href="javascript:;" class="more-btn j-more"><span>更多</span> <i class="arrow arrow-down"></i></a>');
    $(this).remove();
})
</script>

<script>
     
//删除
$('body').on('click','.j-close',function () {
    $(this).parent().remove();
    if($('.j-more').length!==0){
        $('.j-content-taglist').height(30);
        $('.other-row').removeClass('other-row').show();
        $(".j-content-taglist li").each(function(){
            var top = $(this).position().top;
            if(top>0){
                $(this).addClass('other-row');
            }
        })
        if($('.other-row').length===0){
            $('.j-more').remove();
        }
        $('.other-row').hide();
        $('.j-content-taglist').height('auto');
    }
    else if($('.j-fold').length!==0){
        $('.other-row').removeClass('other-row');
        $(".j-content-taglist li").each(function(){
            var top = $(this).position().top;
            if(top>0){
                $(this).addClass('other-row');
            }
        })
        if($('.other-row').length===0){
            $('.j-fold').remove();
        }
    }
    
})
</script>

 

 如果有更好简单的方法，欢迎留言！