JS复选框下拉列表

Question

我有一个.edit :input复选框来启用/禁用下拉列表input 但正如您可以看到下拉列表中的checkbox未在checked时正确打开和关闭下拉列表。此外，如果选择cat-item，则input for the复选框将消失，下拉列表将不再起作用。

如何让.title :input切换下拉列表并在选择cat-item后继续运行？

$(".cat-dropdown .title :input").click(function() {
  var $menu = $(".cat-dropdown-menu");
  if ($menu.height() > 0) {
    closeMenu($menu);
  } else {
    openMenu($menu);
  }
});
$(".cat-dropdown-menu .cat-item").click(function() {
  var $menu = $(".cat-dropdown-menu");
  closeMenu($menu);
  $menu
    .closest(".cat-dropdown")
    .find(".title")
    .text($(this).text())
    .css("color", this.style.color);
});

function closeMenu($menu) {
  $list = $menu.children(".cat-list");
  $menu.closest(".cat-dropdown").toggleClass("closed");
  $menu.css("height", 0);
  $list.css("top", 0);
}

function openMenu($menu) {
  $list = $menu.children(".cat-list");
  $menu.parent().toggleClass("closed");
  $menu.css({
    height: 200
  });
}
$(".edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);
$(".edit-toggle").on("change", function() {
  var idInput = $(this).data("input");
  var inputEle = $("." + idInput);
  var toggleInput = $(this);
  inputEle.each(function() {
    var indicator = $(this).next();
    if (toggleInput.is(":checked")) {
      $(this).attr("disabled", true);
    } else {
      if ($(this).val() == "" && $(this).prop("required")) {}
      $(this).removeAttr("disabled");
    }
  });
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.edit-icon {
  height: 25px;
  width: 25px;
}

.cat-dropdown {
  margin: 25px;
  text-align: left;
  color: #343c3f;
  border: 1px solid #a2acb0;
}

.cat-dropdown.closed .cat-dropdown-menu {
  margin-top: 0px;
}

.cat-dropdown.closed .cat-dropdown-menu .cat-item {
  height: 0px;
}

.cat-dropdown.closed .title {
  border-bottom: none;
}

.cat-dropdown.closed .title:after {
  margin-top: -16px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.cat-dropdown .title {
  width: 100%;
  position: relative;
  height: 40px;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #d9e1e4;
}

.cat-dropdown .title:after {
  display: block;
  content: "▾";
  position: absolute;
  right: 14px;
  margin-top: -16px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.cat-dropdown .cat-dropdown-menu {
  position: relative;
  overflow: hidden;
  max-height: 200px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-sizing: "border-box";
  -moz-box-sizing: "border-box";
  box-sizing: "border-box";
}

.cat-dropdown .cat-list {
  position: absolute;
  top: 0;
  width: 100%;
}

.cat-dropdown .cat-list .cat-item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #d9e1e4;
  padding: 0 12px;
  vertical-align: top;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: margin-top 0.5s, height 0.5s;
  -moz-transition: margin-top 0.5s, height 0.5s;
  transition: margin-top 0.5s, height 0.5s;
}

.cat-dropdown .cat-list .cat-item:hover {
  background-color: #d9e1e4;
  color: #343c3f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for="edit-toggle1">
  <input id="edit-toggle1" data-input="edit-input1" class="edit-toggle" type="checkbox" name="toggle"/>
  </label>
<div class="cat-dropdown closed">
  <div class="edit">
    <label class="title">
    <input class="edit-input1" type="checkbox">
    Choose...</label>
    <div class="cat-dropdown-menu">
      <div name="category" id="category" class="cat-list">
        <div class="cat-item" style="color:#3772b1">Main 1</div>
        <div class="cat-item" style="color:#4eaddc">Main 2</div>
      </div>
    </div>
  </div>
</div>

Answer 1

根据我对您的问题的理解，检查以下工作代码段。

从下拉列表中选择时，您将使用文本替换复选框。这就是为什么下拉不开放的原因。 因此，在复选框

的标签文本周围添加范围

<label class="title">
   <input class="edit-input1" type="checkbox"><span> Choose...</span>
</label>

这样我们只能在选择下拉列表时更改复选框的文本值。

其他在其他功能

function openMenu（$ menu）{   $ list = $ menu.children（＆＃34; .cat-list＆＃34;）;   $ menu.parent（）toggleClass（＆＃34;关闭＆＃34）;

你正在倒闭＆＃39; ＆＃39; .edit＆＃39;父母班。这不是写，因为你正在切换＆＃39; .cat-dropdown＆＃39;在closeMenu（）函数中。同样到了这里。所以改变了这种说法。

＆＃13;

＆＃13;

var $menu = $(".cat-dropdown-menu");
    $(".cat-dropdown .title :input").click(function() {
        var $menu = $(".cat-dropdown-menu");
        if ($menu.height() > 0) {
            closeMenu($menu);
        } else {
            openMenu($menu);
        }
    });
    $(".cat-dropdown-menu .cat-item").click(function() {
        var $menu = $(".cat-dropdown-menu");
        closeMenu($menu);
        $menu
            .closest(".cat-dropdown")
            .find(".title span")
            .text($(this).text())
            .css("color", this.style.color);
    });

    function closeMenu($menu) {
        $list = $menu.children(".cat-list");
        $menu.closest(".cat-dropdown").toggleClass("closed");
        $menu.css("height", 0);
        $list.css("top", 0);
    }

    function openMenu($menu) {
        $list = $menu.children(".cat-list");
        $menu.closest(".cat-dropdown").toggleClass("closed");
        $menu.css({
            height: 200
        });
    }
    $(".edit-toggle").prop("checked", true);
    $(".edit :input").attr("disabled", true);
    $(".edit-toggle").on("change", function() {
        var idInput = $(this).data("input");
        var inputEle = $("." + idInput);
        var toggleInput = $(this);
        inputEle.each(function() {
            var indicator = $(this).next();
            if (toggleInput.is(":checked")) {
                $(this).attr("disabled", true);
            } else {
                if ($(this).val() == "" && $(this).prop("required")) {}
                $(this).removeAttr("disabled");
            }
        });
    });

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.edit-icon {
  height: 25px;
  width: 25px;
}

.cat-dropdown {
  margin: 25px;
  text-align: left;
  color: #343c3f;
  border: 1px solid #a2acb0;
}

.cat-dropdown.closed .cat-dropdown-menu {
  margin-top: 0px;
}

.cat-dropdown.closed .cat-dropdown-menu .cat-item {
  height: 0px;
}

.cat-dropdown.closed .title {
  border-bottom: none;
}

.cat-dropdown.closed .title:after {
  margin-top: -16px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.cat-dropdown .title {
  width: 100%;
  position: relative;
  height: 40px;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #d9e1e4;
}

.cat-dropdown .title:after {
  display: block;
  content: "▾";
  position: absolute;
  right: 14px;
  margin-top: -16px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.cat-dropdown .cat-dropdown-menu {
  position: relative;
  overflow: hidden;
  max-height: 200px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-sizing: "border-box";
  -moz-box-sizing: "border-box";
  box-sizing: "border-box";
}

.cat-dropdown .cat-list {
  position: absolute;
  top: 0;
  width: 100%;
}

.cat-dropdown .cat-list .cat-item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #d9e1e4;
  padding: 0 12px;
  vertical-align: top;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: margin-top 0.5s, height 0.5s;
  -moz-transition: margin-top 0.5s, height 0.5s;
  transition: margin-top 0.5s, height 0.5s;
}

.cat-dropdown .cat-list .cat-item:hover {
  background-color: #d9e1e4;
  color: #343c3f;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for="edit-toggle1">
    <input id="edit-toggle1" data-input="edit-input1" class="edit-toggle" type="checkbox" name="toggle" />
</label>
<div class="cat-dropdown closed">
    <div class="edit">
        <label class="title">
            <input class="edit-input1" type="checkbox"><span> Choose...</span>
        </label>
        <div class="cat-dropdown-menu">
            <div name="category" id="category" class="cat-list">
                <div class="cat-item" style="color:#3772b1">Main 1</div>
                <div class="cat-item" style="color:#4eaddc">Main 2</div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;