Accordion like menu - sub-menu not hiding while click on another link - jQuery

Accordion like menu - sub-menu not hiding while click on another link -
jQuery

I have a menu made with ul an li, and I am trying to hide other sub-menus
when a click event is triggered on a anchor. The HTML menu looks like this
<ul id="navigation">
<li>
<a href="javascript:void(0)">link 1</a>
<ul class="subnavi">
<li><a href="#">sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">link 2</a>
<ul class="subnavi">
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
</ul>
</li>
<li class="active">
<a href="javascript:void(0)">link 3</a>
<ul class="subnavi">
<li><a href="#">sublink 5</a></li>
<li><a href="#">sublink 6</a></li>
</ul>
</li>
<li>
<a href="#">link 4</a>
</li>
</ul>
the CSS code looks like this
#navigation li ul{ display: none;}
an the Jquery part looks like this
$('#navigation > li:has(ul) > a').on("click",function(ev) {
$(this).siblings('ul').toggle().end().siblings().find('ul').hide();
ev.preventDefault();
});
What am I doing wrong ?