时间戳

首页 > 解决方案 > 在 div 元素内单击时，自定义下拉菜单会关闭，为什么？

javascript - 在 div 元素内单击时，自定义下拉菜单会关闭，为什么？

问题描述

我正在使用自定义下拉列表来选择带有 jQ​​uery 和 javascript 的数字，但是当我点击它上面的任何数字时，这个下拉列表会关闭，但我不想要这个。

我只想在有人点击它外部时关闭它，而不是在下拉列表的任何部分发生点击时关闭它。怎么做...？

HTML 是：-

<body>
<div class="number-box">
        <div class="select-group number-select">
          <label for="selectFont">Number</label>
          <div class="number-div"></div>
          <div class="diff-number-box" style="display: none;">
            <label class="transparent-label-text">Number Dropdown</label>
            <div class="number-label-row">
              <label class="label">1</label>
              <label class="label">2</label>
              <label class="label">3</label>
              <label class="label">4</label>
              <label class="label">5</label>
            </div>
            <div class="number-label-row">
              <label class="label">6</label>
              <label class="label">7</label>
              <label class="label">8</label>
              <label class="label">9</label>
              <label class="label">10</label>
            </div>
            <div class="number-label-row">
              <label class="label">11</label>
              <label class="label">12</label>
              <label class="label">13</label>
              <label class="label">14</label>
              <label class="label">15</label>
            </div>
          </div>
        </div>
    </div>

CSS是：-

body{
        font-family: 'verdana', sans-serif;
        margin: 0;
        }
        .number-box{
            margin: 150px auto;
            width: 200px;
        }
        .select-group {
            position: relative;
            text-align: left;
        }
        .select-group > label {
            font-size: 0.9rem;
            font-weight: 400;
            color: #888;
            margin-bottom: 0.5rem;
            display: inline-block;
        }
        .number-div{
            border: 1px solid #bbb;
            height: 35px;
            width: 50px;
            cursor: pointer;
        }
        .diff-number-box {
            padding: 15px;
            background-color: #fff;
            box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
            position: absolute;
            right: -50px;
            bottom: 0px;
            width: auto;
            height: auto;
            z-index: 1;
            text-align: center;
            display: none;
        }
        .diff-number-box .transparent-label-text {
            color: #999;
            font-size: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            display: inline-block;
        }
        .number-label-row {
            display: flex;
            margin-bottom: 5px;
            justify-content: center;
        }
        .number-label-row label{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #222;
            color: #fff;
            text-align: center;
            line-height: 25px;
            margin-right: 8px;
            font-size: 12px;
        }
        .number-label-row label:last-child{
            margin-right: 0;
        }

JS是：-

<script>
      $(".number-div").click(function(){
        let numberBox = $(this).parents(".number-select").find(".diff-number-box");
        $(numberBox).slideToggle();
      });

      var numberBox = document.querySelector(".diff-number-box");

      window.addEventListener("mouseup", function(event){
          if(event.target != numberBox && event.target.parentNode != numberBox){
            numberBox.style.display = "none";
          }
       });
    </script>

标签： javascriptjquery

解决方案

它有帮助吗？

$(".number-div").click(function() {
  let numberBox = $(this).parent(".number-select").find(".diff-number-box");
  $(numberBox).slideToggle();
});

var numberBox = $(".diff-number-box");

window.addEventListener("mouseup", function(event) {
  if (!$(event.target).closest(numberBox).length) {
    numberBox.hide();
  }
});
body {
  font-family: 'verdana', sans-serif;
  margin: 0;
}

.number-box {
  margin: 150px auto;
  width: 200px;
}

.select-group {
  position: relative;
  text-align: left;
}

.select-group>label {
  font-size: 0.9rem;
  font-weight: 400;
  color: #888;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.number-div {
  border: 1px solid #bbb;
  height: 35px;
  width: 50px;
  cursor: pointer;
}

.diff-number-box {
  padding: 15px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  position: absolute;
  right: -50px;
  bottom: 0px;
  width: auto;
  height: auto;
  z-index: 1;
  text-align: center;
  display: none;
}

.diff-number-box .transparent-label-text {
  color: #999;
  font-size: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  display: inline-block;
}

.number-label-row {
  display: flex;
  margin-bottom: 5px;
  justify-content: center;
}

.number-label-row label {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #222;
  color: #fff;
  text-align: center;
  line-height: 25px;
  margin-right: 8px;
  font-size: 12px;
}

.number-label-row label:last-child {
  margin-right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number-box">
  <div class="select-group number-select">
    <label for="selectFont">Number</label>
    <div class="number-div"></div>
    <div class="diff-number-box" style="display: none;">
      <label class="transparent-label-text">Number Dropdown</label>
      <div class="number-label-row">
        <label class="label">1</label>
        <label class="label">2</label>
        <label class="label">3</label>
        <label class="label">4</label>
        <label class="label">5</label>
      </div>
      <div class="number-label-row">
        <label class="label">6</label>
        <label class="label">7</label>
        <label class="label">8</label>
        <label class="label">9</label>
        <label class="label">10</label>
      </div>
      <div class="number-label-row">
        <label class="label">11</label>
        <label class="label">12</label>
        <label class="label">13</label>
        <label class="label">14</label>
        <label class="label">15</label>
      </div>
    </div>
  </div>
</div>

推荐阅读