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>

 1 <script>
 2      
 3 //删除
 4 $('body').on('click','.j-close',function () {
 5     $(this).parent().remove();
 6     if($('.j-more').length!==0){
 7         $('.j-content-taglist').height(30);
 8         $('.other-row').removeClass('other-row').show();
 9         $(".j-content-taglist li").each(function(){
10             var top = $(this).position().top;
11             if(top>0){
12                 $(this).addClass('other-row');
13             }
14         })
15         if($('.other-row').length===0){
16             $('.j-more').remove();
17         }
18         $('.other-row').hide();
19         $('.j-content-taglist').height('auto');
20     }
21     else if($('.j-fold').length!==0){
22         $('.other-row').removeClass('other-row');
23         $(".j-content-taglist li").each(function(){
24             var top = $(this).position().top;
25             if(top>0){
26                 $(this).addClass('other-row');
27             }
28         })
29         if($('.other-row').length===0){
30             $('.j-fold').remove();
31         }
32     }
33     
34 })
35 </script>

 

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

转载于:https://www.cnblogs.com/monozxy/p/11277066.html