jQuery on click of <a> won't run function

Question

I currently have an <a> witin an <li> which when clicked, opens a sub menu.

I now want to make it so that is you click that <a> when it's parent has a class of .open, it closes. But it won't fire.

The HTML:

<li class="menu-item-has-children open">
    <a href="#">emerging market</a>
    <ul class="sub-menu">
        [sub menu stuff]
    </ul>
</li>

So when you click .open a, it should first hide the sibling ul .sub-menu and then removeClass open from the parent

The jQuery

jQuery(".open a").click(
    function (){
        console.log('here!'); // this never seems to fire
        jQuery(this).sibling(".sub-menu").hide();
        jQuery(this).parent().removeClass("open");
});

JS Fiddle showing the (working) opening function but the non-working closing function

http://jsfiddle.net/aa5brt5v/

Answer 1

Why don't use just simply toggle the child list?

$(".menu-item-has-children").click(function() {
  $(this).find(".sub-menu").toggle();
});

/* Default is to hide sub menu */
ul.sub-menu {
  display: none;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="menu-item-has-children"> <a href="#">emerging market</a>
  <ul class="sub-menu">
    <li>[sub menu stuff]</li>
  </ul>
</li>