创建群

1、左边部门可伸缩

2，把左侧选中的内容复制到右边，遇到的问题（左边的内容不变，右边已经添加过的内容，不重复添加）。

js代码如下：

<script>

/* 创建群 */
    $(document).ready(function(){

        $("#department").click(function(){
            $(this).next("ul").toggle();
        });
        
        $(".modal-body li").live("click",function(){
            if($(this).hasClass("chat_active")){
                $(this).removeClass("chat_active");
            }else{
                $(this).addClass("chat_active");
            }            
        });        
         $(".move-right").click(function(){
            var selectli=$("#gp-left .chat_active");//左边选中的内容
            var selected=$("#gp-right .select-member li");//右边选中的内容
            for (var i=0;i<selectli.length;i++){
                var kk=0;
                for (var j=0;j<selected.length;j++){
                    if(selectli[i].value == selected[j].value){//左边选中的内容value一条条与右边的作比较
                        kk++;
                    }                                        
                }
                 if(kk==0){
                     var ee=selectli[i].outerHTML;
                     $(ee).clone(true).appendTo("#gp-right .select-member"); //移入右边时，左边的内容不变
                     $("li").removeClass("chat_active");  
                 }                               
            }
            
        });
         $(".move-left").click(function(){            
            var noselectli=$("#gp-right .chat_active");            
            noselectli.remove();
        });
    });
</script>

核心html代码：

<div class="gp-left">
    <p>我的好友</p>                                                                        
    <div id="gp-left">
            <input id="department" type="button" class="department" value="一级部门">    
               <!-- 部门里的人员，可显示或隐藏 -->
            <ul>
                <li value="12"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>
                <li value="13"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>
                <li value="14"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>
                <li value="15"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>
                <li value="16"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>
                <li value="17"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>                       
            </ul>    
            <input id="department1" type="button" class="department" value="一级部门">    
            <ul>
                <li value="18"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>
                <li value="19"><img src="${ctxStatic}/images/scroll/b4.jpg"/><span>米粒</span></li>                                                            
            </ul>                                                    
    </div>                      
   </div>
   <div class="gp-btn">
    <button class="move-right">>></button>
    <button class="move-left"><<</button>
   </div>
   <div class="gp-right">
    <p>已选成员</p>                                                                        
    <div id="gp-right">                                    
            <ul class="select-member" >
                <li></li>
            </ul>                                                                                                    
    </div>                                                    
   </div>