如何改善JS（Jquery）代码？一个简单的下拉菜单

Question

如何编辑代码，在第二次单击时关闭下拉菜单。在页面中，我有很多下拉列表。

$('.dropdown').on('click', function() {
  var active = 'active';

  $(document).on('click', function() {
    $('.dropdown').removeClass(active);
  });

  $('.dropdown').removeClass(active);
  $(this).toggleClass(active);
  return false;
});

.dropdown {
  margin: 50px;
  width: 30px;
  height: 30px;
  position: relative;
  display: block;
  background: #333;
  cursor: pointer;
}

.dropdown ul {
  display: none;
  width: 100px;
  position: relative;
  bottom: -120%;
  left: -100%;
}

.dropdown.active ul {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
<div class="dropdown">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

如示例中所示，您只想在单击正方形时从关闭添加到菜单。

Answer 1

只需简单的一行就足够

$('.dropdown').on('click',function() {
  $(this).find("ul").toggle();
});

Answer 2

尝试一下，

$(document).on('click', function(e){
    if($(e.target).parents('div.dropdown').length) {
        return false;
    }        
    $('.dropdown').toggleClass('active');
    return false;        
});

Live Demo

已更新为multiple dropdowns