如何将Jquery代码转换为纯javascript

我正在使用引导。 我不知道如何在纯javascript中使用它。当我们单击手风琴时，这将打开一个div

$(function() {
    $("#panelTicketsList .list-group-item").on("click", function() {
        $("#panelTicketsList .list-group-item").removeClass('selected');
        $(this).addClass('selected');
        if ($('#panelTicketsList').hasClass('col-md-12')) {
            $('#panelTicketsList').removeClass('col-md-12').addClass('col-md-3');
            $('.panelTicketDetail').removeClass('hide');
        }
     });
});

jsFiddle：

var listGroupItems=document.getElementsByClassName（'list-group-item'）；
对于（j=0；j-1）{
元素[i].className=elements[i].className.replace（“col-md-12”、“col-md-3”）；
元素[i].className=elements[i].className.replace（“隐藏”、“替换”）；
}
}
this.className=this.className+“选定”；
});
}

如果必须支持IE8或IE9等较旧的浏览器，则不能使用诸如forEach或classList等JS功能。相反，您应该使用for循环和className

//将DOM查询保存在变量中以供重用
var panelTicketsList=document.getElementById（'panelTicketsList'）；
var panelTicketsDetails=document.getElementsByClassName（'panelTicketDetail'）；
var listGroupItems=panelTicketsList.getElementsByClassName（'list-group-item'）；
//浏览所有listGroupItems并设置click listener
对于（var i=0；i-1）{
//将clas col-md-12替换为col-md-3
panelTicketsList.className=panelTicketsList.className.replace（'col-md-12'，'col-md-3'）；
//浏览所有panelTicketDetails并删除隐藏类
对于（var k=0；k}

为什么要用Javascript重写此代码？是什么原因导致您出现问题？您尝试过什么？因为我们现在使用的是服务，所以一些后端数据附件不接受页面上的Jquery，所以我们希望将此代码片段转换为纯JS。然后您需要停止使用引导，因为这需要Jquery。或者，可能更明智的做法是，修复与jQuery冲突的任何问题。听起来您并没有真正理解为什么不能使用jQuery。我会更深入地研究这一点，并解决实际问题。我尝试使用它，但它没有做任何事情，调试它，没有显示。正在努力

var list = document.getElementById('panelTicketsList');
var items = document.querySelectorAll("#panelTicketsList .list-group-item");
var detail = document.querySelectorAll(".panelTicketDetail");
items.forEach(function(btn){
    btn.addEventListener("click", function(){
        items.forEach(function(item){ item.classList.remove("selected"); });
        this.classList.add("selected");

        if(list.classList.contains('col-md-12')) {
            list.classList.remove('col-md-12');
            list.classList.add('col-md-3');
            detail.classList.add("hide");
        }

});

var listGroupItems = document.getElementsByClassName('list-group-item');
for (j = 0; j < listGroupItems.length; j++) {
    listGroupItems[j].addEventListener("click", function () {
        var elements = listGroupItems;
        for (i = 0; i < elements.length; i++) {
            if (elements[i].className.indexOf("col-md-12") > -1) {
                elements[i].className = elements[i].className.replace("col-md-12", "col-md-3");
                elements[i].className = elements[i].className.replace("hide", "");
            }
        }

        this.className = this.className + " selected";
    });
}