slideDown函数需要两次单击才能工作

时间:2014-11-11 14:13:33

标签: javascript jquery html slidedown slideup

我的网站上有一个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>

1 个答案:

答案 0 :(得分: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>

小提琴:http://jsfiddle.net/64gn1unk/