How can I change an item's menu with click event? [duplicate]

Navigation
0

I'm working on this site and would like to be able to help me to appear only the submenu of the item that was clicked.

Explaining a little, I put the image inside the <li> that contains the class sub-menu and assign it to jquery a in> click that when clicked, will make a toggle by opening and closing the submenu. What I wanted was to be able to open and close only the menu whose event click 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(){//Coloqueioarrowparadescerosmenusquetemsub-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();
        });

    });
    
asked by anonymous 15.03.2015 / 01:20

1 answer

1

Because the arrow is within the same submenu element, you can restrict the search to parent of the arrow itself using find . In this way, the slideToggle will be executed only on elements of class .sub-menu in of the li above in the parent hierarchy of .arrow_nav . > 

$("img.arrow_nav").on('click', function(){
    $(this).parent().find(".sub-menu").slideToggle();
});
    
15.03.2015 / 01:50
Input only with V or F Edit Signed that contains image