MouseEnter событие не работает

Question

То, что я сделал в этой функции является создание выпадающего меню при нажатии на кнопку:

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="main"> 
    <div id="dropdownbutton"> 
     <button type="button" onclick="toggleNavPanel('dropdown')">Drop Down</button> 
    </div> 

    <div id="dropdown"> 
     <p>Working</p> 
    </div> 

Расположение рассказа элемента:

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

Answer 1

На основе обсуждений ...

Jquery библиотека не была включен и код не был добавлен в обработчик dom dom