Как доработать меню на jquery?

Question

[Danya Wyse]

Помогите доработать, нужно чтобы меню закрывалось при повторном нажатии на него и при нажатии вне окна меню

$("nav div").click(function() {
  $("ul").slideToggle();
  $("ul ul").css("display", "none");
});
$("ul li").click(function() {
  $("ul ul").slideUp();
  $(this).find("ul").stop().slideToggle();
});
$(window).resize(function() {
  if ($(window).width() > 768) {
    $("ul").removeAttr('style');
  }
});
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="">
    <i class="fas fa-bars"></i>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Drop 1 <i class="fas fa-sort-down"></i></a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
        <li><a href="#">Product 4</a></li>
      </ul>
    </li>
    <li><a href="#">Drop 2 <i class="fas fa-sort-down"></i></a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
        <li><a href="#">Product 4</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">FAQ</a></li>
  </ul>
</nav>