Actualmente estoy usando las siguientes dos funciones para crear dinámicamente una lista plegable a partir de un objeto que contiene información sobre las partes individuales dentro del objeto. También he incluido una casilla de verificación para cada elemento de la lista plegable, pero esa casilla de verificación siempre aparece justo al lado de los nombres. Preferiría que estas casillas de verificación estuvieran en la misma fila que el elemento de la lista, pero en una columna separada para que se vea mejor. También podría agregar más columnas más adelante con información material. Así que estaba tratando de averiguar cómo puedo hacer esto con mi configuración actual a continuación o si había una mejor manera de lograr lo que quiero en lugar de usar mi lista.

 <div class="objtree"></div>

 function check(obj) { var html = ''; var name = obj.name ? obj.name +' (' +obj.type+')' : obj.type; html +='<div class="node">' html += '<li class="ntitle">' + name + '<input type="checkbox" name="'+(obj.id-id)+'" value="checked" onchange="snap(this)"/></li>'; if (obj.children) { html += '<ul class="children hide">'; for (var i = 0; i < obj.children.length; i++) { html += check(obj.children[i],) } html += '</ul>'; } html += "</div>"; return html; } function assignEvent() { $('.ntitle').click(function () { var p = $(this); var c = p.parent().find('.children:first') if (c.hasClass('hide')) { c.removeClass('hide'); p.addClass('open'); } else { c.addClass('hide'); p.removeClass('open'); } }) }

Lo siguiente es lo que tengo actualmente, que es plegable si hago clic en los elementos:

Y estoy tratando de lograr lo siguiente: