Javascript 鼠标事件不工作

我在这个函数中所做的是在单击按钮时创建一个下拉菜单：

function toggleNavPanel(x){

    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
    if(panel.style.height == maxH){
        panel.style.height = "0px";
        navarrow.innerHTML = "▾";
    } else {
        panel.style.height = maxH;
        navarrow.innerHTML = "▴";
    }
}

这是成功的。但这不是我想要的。我想要的是有人能够鼠标移到某物上，并弹出表单

我所做的是将其放入一个mouseenter函数中，如下所示：

$('#story').mouseenter(function() {
    var panel = document.getElementById('dropdown'), maxH="300px";
        panel.style.height = "0px";

}).mouseleave(function() {
    var panel = document.getElementById('dropdown'), maxH="300px";
        panel.style.height = maxH;

});

这是行不通的。实际的mouseenter事件从未执行过，因为我尝试过发出警报，但它也不起作用

有人能告诉我我做错了什么吗？下面是一些更相关的代码：

#story {
    position:relative;
    top: -20%;
    left: 0%;
    width: inherit;
    height: 25%;
    margin: 0 auto;
    margin-top: 5px;
    background-color: transparent;
    color: black;
    border-style: solid;
    border-width: 1px;
    border-color: #D8D8D8;  
 }
 #dropdownbutton {
    float:center;
    width:144px;
    height:46px;
    padding-top:16px;
    background:#F90;
}
#dropdown{
    position:absolute;
    height:0px;
    width:550px;
    background:#000;
    top:60px;
    left:160px;
    border-radius:0px 0px 8px 8px;
    overflow:hidden;
    z-index:10000;
    transition: height 0.3s linear 0s;
}

视图：

下降
工作

故事元素的位置：

<div class="info_bar">
    <div id="story">Story</div>
    <div id="info">Info</div>
    <div id="content">Content</div>
</div>

故事
信息
内容

根据讨论

---

jQuery库未包含，代码也未添加到dom就绪处理程序中。

其中是

#story

元素

story

元素是在页面加载时出现还是动态创建的。。。在

$（'#story'）之前添加
console.log（$（'#story'）.length）
。mouseenter（function（）{…}）

并查看什么是日志在日志中，我在控制台中没有看到任何东西这意味着语句本身没有被执行。。。日志中有错误吗。。你能不能试着提醒一下我应该在哪里做？我已经在mouseenter函数中尝试了一个警报，但它不起作用

<div class="info_bar">
    <div id="story">Story</div>
    <div id="info">Info</div>
    <div id="content">Content</div>
</div>