Javascript 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>

购物袋

以下是一个简单的示例：

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

你好

---

Fiddle:

函数showCart（）如何；首先触发？啊，一定是这样。第一次单击它时，我调用该函数，第二次单击它时，请向下滑动。好了：）请参见我作为答案发布的示例。如果这些元素存在于DOM树中，您就不需要将简单的点击事件放入自定义函数中。只要我的“购物袋”中只有一个项目，它就可以正常工作。当我有多把小提琴时，它一按就上下滑动。请加把小提琴，我们来看看吧？：）哦，是的，记住id应该是唯一的。您应该只有一个id为

rollDown

的元素。我的代码结构更好，删除了不必要的函数，这使它工作起来。我很喜欢你展示的

slideToggle

函数，并将其放在

$（文档）上。准备好（function（）{

而不是其他函数。感谢你的帮助！如果这个答案解决了你的问题，不要忘了将其标记为正确答案，以便其他有类似问题的人将来可以从中受益。干杯！

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