下拉菜单不会在选择时关闭（javascript）

Question

我正在尝试在一个页面上创建多个下拉菜单，这些下拉菜单会根据从该下拉菜单中的选择来选择单选按钮。

它工作了一半，单选按钮会根据选择发生变化，但是我无法关闭下拉菜单并在选择时保留选择器。想知道这是否与 JS 有关 - 下面的小提琴

小提琴：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");
});

Answer 1

您正在使用列表元素的单击处理程序，因此以下内容对我有用：

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