title: Jquery dropdown not working right
body: <p>I was creating a dropdown with jquery, HTML and CSS. I want to close the dropdown when the user clicks outside of dropdown. But it's not working fine.</p>
  
  <p>JS</p>
  
  <pre><code>function _drpdntest() {
   $(".drpdn-click").click(function(){
  var _drpdn_container = $(this).attr("data-drpdn-click"); 
  var _drpdn_content =  $('[data-drpdn-content="'+_drpdn_container+'"]');
  _drpdn_content.toggleClass("drpdn-show"); 
  _drpdn_content.siblings().removeClass("drpdn-show");
  $(document).click(function(event){
  _drpdn_content.removeClass("drpdn-show"); 
  });
  $(this, _drpdn_content).click(function(event){
  event.stopPropagation();
  });
  });
  }
  // Run Component Function
  $(document).ready(function(){
  _drpdntest();
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;button class="drpdn-click" data-drpdn-click="main"&gt;CLICK&lt;/button&gt;
  &lt;div class="drpdn-content drpdn-body" data-drpdn-content="main"&gt;
  Main
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.drpdn-content {
  z-index: 1000;
  position: absolute;
  display:none;
  overflow: hidden;
  }
  .drpdn-content.drpdn-show {
  display: block;
  }
  </code></pre>