Estoy tratando de crear una serie de menús desplegables en una página que eligen botones de opción según la selección de ese menú desplegable.
Funciona a medias, el botón de opción ESTÁ cambiando por elección, sin embargo, no puedo hacer que el menú desplegable se cierre y conserve el selector cuando se elige. Me pregunto si tiene que ver con el JS - violín a continuación
Violín: https://jsfiddle.net/8b069fj2/
$("input").on("change", function () { var inputName = this.name; $("#select-' + inputName + '-btn").html(this.checked ? this.value : ""); }); $(".js-option").on("click", function () { $(this).parent().find("ul").toggleClass("js-drop"); });está enviando el controlador de clics para los elementos de la lista, por lo que lo siguiente funcionó para mí:
$('input').on('change', function() { var inputName = this.name; console.log(inputName); var selector = '#select-' + inputName + '-btn'; $(selector).html(this.checked ? this.value : ''); }); $('.js-option').on('click', function() { $(this).parent().find('ul').toggleClass("js-drop"); }); $('li .js-option').on('click',function(){ $(this).closest('ul').toggleClass("js-drop"); })