CODEWITHSUNDEEP
javascriptjquery
Ved Prakash
Ved Prakash

Reputation: 25

Custom Dropdown getting closed when clicked inside div element, why?

I am using a custom dropdown to choose numbers with jQuery and javascript but this dropdown gets closed when I click on any number on it, but I don't want this.

I want to close it only when someone clicks outside it, not on when click happens on any part of dropdown. How to do it...?

HTML is:-

<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 is:-

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 is:-

<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>

Upvotes: 0

Views: 33

Answers (1)

Pranav Rustagi
Pranav Rustagi

Reputation: 2731

Does it help ?

$(".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>

Upvotes: 1

Related Questions