Buen día. Tengo un problema a la hora de realizar un ejercicio con Jquery.
En mi HTML tengo un div que contiene una lista como tipo menú:
$(document).ready(function(){
$("#M1").toggle(function(){
$("#submenu1").append('<p>Prueba</p>');
}, function(){
$("#submenu1").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li id="M1"><a href="#">Menu Principal</a></li>
<li><a href="#">Menu Secundario</a></li>
<li><a href="#">Menu Terceario</a></li>
</ul>
</div>
<div id="submenu1">
</div>
Y cuando ejecuto esto en el navegador, desaparece el elemento li con id M1...
No se a que se deba. Si alguien pudiera orientarme en esto se lo agradeceria mucho. Soy nuevo en esto de la programacion con JavaScript.