Question

我试图创建一个cookie通知，一旦用户单击“同意”（或一旦添加，则取消），它将使用.slideToggle（或slideUp / Down）隐藏该元素。

当前，当您单击页面上的任意位置时，该元素将会滑动切换，而不仅仅是像我尝试的那样单击“同意”按钮时。

我正在Wordpress.org网站上执行此操作（不确定是否会影响它），并且我只是在学习JavaScript / jQuery，因此如果我误解了.click或.slideToggle的工作原理，我深表歉意。

代码如下：

<style>
.test{
    display:inline-block;
    background-color:#000;
    color:#FFF;
    text-align:center;
    width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
    var agree=function(){getElementById("#agree")};
    $(agree).click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

Answer 1

此agree函数从不返回任何内容。 var agree=function(){getElementById("#agree")};此外，您永远不会调用函数（仅将引用传递给函数）。最后，您应该将jquery放在document ready event内，以便在脚本运行之前加载整个页面。

尝试使用此javascript：

$(function() {
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
});

Answer 2

问题是您试图在元素存在之前就对事件进行连线：

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

您无法将事件添加到尚不存在的元素。

您可以通过多种方法解决此问题：

1元素存在后添加代码：

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

2准备好使用文档：

<script type="text/javascript">
    $(function() { 
        $("#agree").click(function(){
            $("#box").slideToggle();
        });
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

3使用事件委托：

<script type="text/javascript">
    $(document).on("click", "#agree", function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

当您单击页面上的任意位置时，该元素将滑动切换

正在发生的事情是，在var agree=function(){getElementById("#agree")};之后然后是agree == null，所以您要进行$(null).click(...，然后将其应用于整个页面。如果您将其更改为$("#agree").click(...，则会遇到上述问题（这就是为什么您无法通过这种方式工作的原因）

jQuery仅在单击指定元素时才激活.click（）

2 个答案: