Click function doesn't work in my JQuery

Question

$(document).ready(function(){
   $("#menu-trigger").click(function(){
    $("#menu").slideToggle();
    });
 });

#menu {
    width: 100%;
    height: 35px;
}
ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    background: blue;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 10px 0 0;
    position: relative;
    background:blue;
}
ul.topnav li a {
    color:red;
    padding: 10px 5px;
    float: left;
    display:block;
    font-size: 12px;
    text-transform: uppercase;
    font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
    color: #fff;
    text-decoration: none;
}

ul.topnav li a:hover {
    background: violet;
    color:white;
}
ul.subnav{
    display:none;
	position:absolute;
	top:100%;
    padding:0;
}
ul.subnav li{
    list-style: none;
    float:left;
	width:100%;
}
ul.subnav a{
    line-height:120%;
	padding:10px 15px;
}

ul.topnav li:hover>ul.subnav{
	display:block
}
#menu-trigger{
    display:none;
}

 
@media screen and (max-width:600px){
     #menu{
         display:none;
     }
    #menu-trigger{
       display:block;
   }
    
     ul.topnav li{
        float:none;
    }
     ul.topnav li a{
        float:none;
        border-bottom:2px solid red;
    }
   
}

<span id="menu-trigger">MENU</span>
<div id="menu">
    <ul class="topnav">
        <li><a>Home</a>
        </li>
        <li><a>About Us</a>

            <ul class="subnav">
                <li><a>Introduction</a>
                </li>
                <li><a>History</a>
                </li>
                <li><a>Mission/Vision Statement</a>
                </li>
            </ul> 

        </li>
        <li><a>Basic Education</a>

            <ul class="subnav">
                <li><a>Introduction</a>
                </li>
                <li><a>The Basic Ed</a>
                </li>
                <li><a>About Basic Ed</a>
                </li>
            </ul> 

        </li>
        <li><a>IB</a>
        </li>
        <li><a>College</a>
        </li>
        <li><a>Contact Us</a>
        </li>
    </ul>
</div>

I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.

Answer 1

Try this:

$(document).ready(function(){
   $("#menu-trigger").on('click', function(){
      $("#menu").slideToggle();
    });
 });

here you can take a look how it's working when you click on the #menu-trigger link