<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>

//类别多选栏的样式（小绿勾）

            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("");

            })

/*******类别多选栏的部分******/

#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;

}