基于bootstrap面板的类别多选栏

1、html部分

<div class="panel panel-default">
     <div class="panel-heading">请选择您需要的分类（可多选）</div>
     <div class="list-group" id="category">
         <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>前端</p></a>
         <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>后台</p></a>
         <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>iOS</p></a>
         <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>java</p></a>
         <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>测试</p></a>
         <a href="#" class="list-group-item" id="newCategory"><span class="glyphicon glyphicon-ok " ></span>
             <p>自定义</p>
             <div >
                 <input style="position:relative;width:70%;float:left;" type="text" maxlength="10" placeholder="请输入要添加的类别" class="form-control" name="" >
                 <button style="float:right;" class="btn btn-primary">添加</button>
             </div>
        </a>
     </div>
     <button style="width:30%; float:right;margin-top: 15px;" id="returnNewTask" class="btn btn-success">确定</button>
</div>

2、js

//类别多选栏的样式（小绿勾）
            var $category = $("#category");
            $category.delegate("a", "click", function (e) {
                if ($(this).index() == $("#category a").length - 1) {
                    $('#newCategory div').css("display", "block");
                }
                else {
                    $('#newCategory div').css("display", "none");
                    $("#newCategory input").val("");
                    if ($(this).is(".active")) {
                        $(this).removeClass("active");
                    }
                    else {
                        $(this).addClass("active");
                    }
                    ;
                }
            });

            $("#newCategory button").on("click", function () {
                var item = '<a href="#" class="list-group-item active"><span class="glyphicon glyphicon-ok" ></span><p>' +
                    $("#newCategory input").val() + '</p></a>';
                $("#newCategory").before(item);
                $("#newCategory input").val("");
            })

3、css

/*******类别多选栏的部分******/
#category .active{
    background-color: white;
    color: black;
    border: 1px solid #E2E2E3;
}

#category .badge{
    margin-top: -4px;
    background-color:transparent;
    border: none;
}

#category span{
    float:right;
    display:none;
}

#category .active span{
    display:block;
    float:right;
    color: rgb(70, 176, 85);
    font-size: 15px;
}

#options a{
    overflow: hidden;
}

#options .panel{
    width:100%;
    margin-left: auto;
    margin-right: auto;
}

#newCategory div{
    display: none;
}