У меня есть простой сценарий выпадающего списка, и я хочу, чтобы он скрывал все открытые выпадающие списки на клике вне меню. Но, похоже, это не работает, кто-нибудь знает почему?

Вы можете найти его здесь: http://codepen.io/dr-potato/pen/rLleC?editors=101

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li class="Navigation-listItem is-dropdown">
    <a href="#">About</a>
    <ul class="Navigation-list is-dropdown is-hidden">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
  </li>
  <li class="Navigation-listItem is-dropdown">
    <a href="#">Contact</a>
    <ul class="Navigation-list is-dropdown is-hidden">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
  </li>
</ul>

CSS

.Navigation-list {
    display: block;
}

.Navigation-list.is-hidden {
    display: none;
}

JS

$(document).ready(function() {
    $('.Navigation-listItem').click(function() {
      $(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
    });
});

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $(".Navigation-listItem.is-dropdown").addClass('is-hidden');
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$(".Navigation-listItem.is-dropdown").click(function(e){
  e.stopPropagation();
});