Функция slideDown требуется два щелчка для работы

Question

У меня есть функция slideDown на моем сайте. Но почему-то это не работает в первый раз, когда вы нажимаете на него. Поэтому мне нужно нажать два раза, чтобы функция работала. Что может быть неправильным?

Я также хочу, чтобы div скользил вверх, когда я снова нажимаю кнопку, не знаю, как я это сделаю. Я пробовал использовать slideToggle, но это только закончилось тем, что div поднимался и опускался пару раз перед закрытием. Даже для этого мне нужно было щелкнуть два раза.

Вот мой JS:

function showCart() { 
    $("#rollDown").click(function() { 
     $("#shopping_cart_page").slideDown(); 
    }); 

    /* not relevant for this */ 
    emptyBag = document.getElementById("emptyBag"); 
    emptyBag.addEventListener("click", emptyCart); 

} 

А вот мой HTML:

<div id="navbar"> 
       <ul> 
        <li><a href="products.html">Products</a></li> 
        <li><a href="index.html#about">About</a></li> 
        <li><a href="index.html#giveaways">Giveaways</a></li> 
        <li><a href="index.html#contact_field">Contact </a></li> 
        <li><a id="rollDown">Shopping Bag</a></li> 

       </ul> 
</div> 

Answer 1

Вот простой пример:

JQuery:

$(document).ready(function(){ // Just adding the click event inside the document ready method should do the trick for you. 
    $("#rollDown").click(function() { 
     $("#shopping_cart_page").slideToggle(); 
     }); 
    }); 

HTML

<input type="submit" id="rollDown" value="Toggle"/> 
<div id="shopping_cart_page">Hi</div> 

Fiddle: http://jsfiddle.net/64gn1unk/