How can I change with event click the menu of an item?

Question

I’m working on this website and I wish they could help me to show only the sub-menu of the item that was clicked.

Explaining a little, I put the image inside the <li> containing the class sub-menu and assigns to it through the jquery an event click that when clicked, will make a toggle opening and closing the sub-menu. What I would like to be able to open and close only the menu whose click event was triggered.

Here are the codes:

HTML

<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31"><a href="http://stanley.axitech.com.br/loja-virtual" class="menu-image-title-after menu-image-not-hovered">Loja virtual</a>
    <ul class="sub-menu">
        <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="#" class="menu-image-title-after menu-image-not-hovered">Item 1</a></li>
        <li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33"><a href="#" class="menu-image-title-after menu-image-not-hovered">Item 2</a></li>
        <li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34"><a href="#" class="menu-image-title-after menu-image-not-hovered">Item 3</a></li>
    </ul>
    <img class="arrow_nav" src="http://stanley.axitech.com.br/wp-content/themes/ead/images/arrowdown.png">
</li>

JS

    $(function(){

        // Coloquei o arrow para descer os menus que tem sub-itens
        $("#topo_navigation ul li.menu-item-has-children")
        .append("<img class='arrow_nav' src='<?=MINHASIMAGENS?>arrowdown.png'>");

        // Vou mandar com toggle aparecer/desaparecer os sub-menus
        $("img.arrow_nav").on('click', function(){
            // aqui preciso saber como no evento click com toggle ...
            // eu vou abrir só o sub-menu do menu clicado     <------
            $(".sub-menu").slideToggle();
        });

    });

Answer 1

Since the arrow is inside the same submenu element, you can restrict the search to the parent of the arrow itself using find. Thus the slideToggle will be executed only on the class elements .sub-menu within of li up in the hierarchy (Parent of .arrow_nav).

$("img.arrow_nav").on('click', function(){
    $(this).parent().find(".sub-menu").slideToggle();
});