How to clear this issue ” Drop down disappering after clicking on it bootstarp datatoggle=”Dropdown issue” “

$(function(){
  $('#expandDropDown').click(function(){
     $('#qualitySelectorDrop').toggleClass('active');
     $("#expandDropDown").toggleClass('drop');
  });
});

#expandDropDown {
  color: blue;
}
#expandDropDown.drop{
  /*changing the selector arrow from down to up*/
  color: red;
}
.active-result.highlighted{
  background-color:red;
}
.mCustomScrollbar {
  width: 38px;
  position: absolute;
  left: -9000px;
}
.mCustomScrollbar.active {
  left: 0;
}
#qualitySelectorDrop {
  left: -9000px;
  width: 59px;
  top: 29px;
  height: 100px;
  background: blue;
  position: absolute;
}
#qualitySelectorDrop.active {
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="row-span" id="expandDropDown" style="width:61px;">
    <span>Please Select</span>
  <!-- <div><b></b></div> -->
  </a>  
</div>

<div class="drop-row" id="qualitySelectorDrop">
  <div class="drop-search">
    <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1">
      <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
        <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"></div>
          <li class="active-result">1</li>
          <li class="active-result">2</li>
          <li class="active-result">3</li>
          <li class="active-result">4</li>
          <li class="active-result">5</li>
          <li class="active-result">6</li>
          <li class="active-result">7</li>
          <li class="active-result">8</li>
        </div>

      <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;">
      <div class="mCSB_draggerContainer">
        <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;">
          <div class="mCSB_dragger_bar" style="line-height:30px"></div>
            <div class="mCSB_draggerRail"></div>
          </div>
         </div>
      </div>
    </ul>
  </div>
</div>