I am currently working on creating a dropdown menu list with jQuery and simple CSS. I have set up a Demo where the sliding animation is functioning correctly, but I am encountering an issue where the page refreshes when the item is clicked. Here is the code snippet I am using:
<style>
.musthidden{display:none;}
</style>
<ul>
<li><a href="#">One</a></li>
<li id="two"><a href="#">Two</a>
<ul class="musthidden">
<li><a href="#">Two _ 1</a></li>
<li><a href="#">Two _ 2</a></li>
<li><a href="#">Two _ 3</a></li>
<li><a href="#">Two _ 4</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
<script>
$("#two").on("click",function(){
$(".musthidden").slideToggle();
});
</script>
Would appreciate any insights on why this behavior is occurring.