Skip to main content
adicionou 41 caracteres ao conteúdo
Fonte Link

Cara, o problema era no seletor que você usou. Ao usar ".sidenav_menu ul", você está chamando todas as ul pertencentes à classe sidenav. Então use a função "slideToggle" (abre e fecha com efeito de deslizar) e como seletor use "this" e dê um .find() no elemento "ul", que vai chamar apenas o elemento que chamou a função, nesse caso sera a "sidenav" específica. O código abaixo foi testado e funciona.

$(document).ready(function() {

    // Fecha Sidenav
    $("#Close_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "0px"
        });
    });

    // Abre Sidenav
    $("#Open_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "300px"
        });
    });

    // Abre sub menu
    $(".sidenav_menu").click(function() {
        $(".sidenav_menu ul").hide();
        $(this).find("ul").slideToggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Cara, o problema era no seletor que você usou. Ao usar ".sidenav_menu ul", você está chamando todas as ul pertencentes à classe sidenav. Então use a função "slideToggle" (abre e fecha com efeito de deslizar) e como seletor use "this" e dê um .find() no elemento "ul", que vai chamar apenas o elemento que chamou a função, nesse caso sera a "sidenav" específica. O código abaixo foi testado e funciona.

$(document).ready(function() {

    // Fecha Sidenav
    $("#Close_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "0px"
        });
    });

    // Abre Sidenav
    $("#Open_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "300px"
        });
    });

    // Abre sub menu
    $(".sidenav_menu").click(function() {

        $(this).find("ul").slideToggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Cara, o problema era no seletor que você usou. Ao usar ".sidenav_menu ul", você está chamando todas as ul pertencentes à classe sidenav. Então use a função "slideToggle" (abre e fecha com efeito de deslizar) e como seletor use "this" e dê um .find() no elemento "ul", que vai chamar apenas o elemento que chamou a função, nesse caso sera a "sidenav" específica. O código abaixo foi testado e funciona.

$(document).ready(function() {

    // Fecha Sidenav
    $("#Close_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "0px"
        });
    });

    // Abre Sidenav
    $("#Open_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "300px"
        });
    });

    // Abre sub menu
    $(".sidenav_menu").click(function() {
        $(".sidenav_menu ul").hide();
        $(this).find("ul").slideToggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Fonte Link

Cara, o problema era no seletor que você usou. Ao usar ".sidenav_menu ul", você está chamando todas as ul pertencentes à classe sidenav. Então use a função "slideToggle" (abre e fecha com efeito de deslizar) e como seletor use "this" e dê um .find() no elemento "ul", que vai chamar apenas o elemento que chamou a função, nesse caso sera a "sidenav" específica. O código abaixo foi testado e funciona.

$(document).ready(function() {

    // Fecha Sidenav
    $("#Close_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "0px"
        });
    });

    // Abre Sidenav
    $("#Open_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "300px"
        });
    });

    // Abre sub menu
    $(".sidenav_menu").click(function() {

        $(this).find("ul").slideToggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>