jquery - contextual - abra el menú secundario haciendo clic y cierre el menú secundario abierto

menu contextual html5

Question

Estoy usando un código JS para mostrar el submenú desde el menú haciendo clic en li items. cuando hago clic en un ítem li, cuando aparece el sub menú slideToggle y si un submenú ya está abierto, entonces es slideUp. Funciona perfectamente

Pero tengo un solo problema, al hacer clic en un li de mi submenú, se desliza hacia arriba y luego SlideToggle nuevamente, ¿cómo puedo evitar esto?

Aquí está mi jquery:

$("#menu li").click(function () {
    $(''ul.sub-menu'').not( $(this).children() ).slideUp();
    $(this).children("ul.sub-menu").slideToggle();
});

y esto es lo que he intentado hasta ahora sin éxito:

$("#menu li").not($(''#menu li sub-menu li a'')).click(function () {
    $(''ul.sub-menu'').not( $(this).children() ).slideUp();
    $(this).children("ul.sub-menu").slideToggle();
});

aquí está mi html:

<ul id="menu">
<li><a href="#">1</a></li>
<li>2
<ul class="sub-menu">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul> 
</li>
<li>3
<ul class="sub-menu">
<li><a href="#">3.1</a></li>
</ul> 
</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>

y mi CSS:

.sub-menu {display:none}

y un Jsfiddle para verlo en acción:

http://jsfiddle.net/2s023cfc/1/

Puede alguien ayudarme con esto ? Gracias

Answer 1

¡Especifique a qué elemento se dirige el evento en JQuery!

$("#menu > li > a").click(function () {
    $(''ul.sub-menu'').not($(this).siblings()).slideUp();
    $(this).siblings("ul.sub-menu").slideToggle();
});

.sub-menu {
    display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a>
        <ul class="sub-menu">
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
        </ul>
    </li>
    <li><a href="#">3</a>
        <ul class="sub-menu">
            <li><a href="#">3.1</a>
            </li>
        </ul>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">6</a>
    </li>
</ul>

Answer 2

Prueba esto-

  $("#menu li").not($(''#menu li sub-menu li a'')).click(function (e) {
        $(''ul.sub-menu'').not( $(this).children() ).slideUp();
        $(this).children("ul.sub-menu").slideToggle();
        e.stopPropagation()
    });

Debe detener la propagación.