javascript - jquery 下拉菜单不起作用

Question

谁能告诉我为什么我的下拉菜单不起作用？我觉得这是一个非常简单的修复，但我无法弄清楚。

HTML

    <div id="Build" class="dropdown_head col-xs">
        <h1>Build</h1>
        <img src="assets/images/img_1.png">
    </div>    

    <div class="dropdown col-xs">
        <p>Some things are written here</p>

         <img src="assets/images/img_21.png" style="float: right;"> 
    </div>

J查询:

$(document).ready(function(){

$(".dropdown_head").on('click'.function(){
    $(".dropdown").slideToggle("slow");

    });

});

CSS:

.dropdown_head{
    width: 100%;
    height: 90px;
}

.dropdown{
    font-family: 'Dosis';
    width: 100%;
    height: 300px;
    margin-left: 20px;
    margin-top: 30px;
    display: none;
}

Answer 1

$(".dropdown_head").on('click'.function(){
$(".dropdown").slideToggle("slow");

});

看起来像一个 .而不是 , near function()