单击功能在我的 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>

我在我的代码中找不到问题，特别是在 jQuery 中。 click 和 slideToggle 事件不起作用。我想要的是当屏幕达到其最大宽度时，水平菜单将不再显示，而是当您单击 MENU 时，向上和向下滑动将切换导致垂直和移动友好的导航菜单。我只是按照 Youtube 上的一些教程进行操作，但对我不起作用。

Answer 1

试试这个：

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

点击#menu-trigger link，您可以在这里查看它的工作原理