Question

我有一个包含jQuery的网站。加载网站时，我会检查Cookie以查看用户是否已接受Cookie政策。如果用户之前没有接受过cookie策略，我想在屏幕顶部向他们显示提示。我想推下其余的内容。出于这个原因，我正在尝试这个

＆＃13;

$(document).ready(function() {
  var isAccepted = false;
  if (isAccepted !== 'true') {
    var notice = '<div><div id="myNotice" class="container" style="height:0px;">' +
      'This site uses cookies. ' +
      'Are you ok with this?' +
      '<button id="acceptButton" class="btn btn-secondary">Accept</button>' +
      '</div></div>';

    $('body').prepend(notice);
    $('#myNotice').animate({
      height: 100
    }, 200);

    $('#acceptButton').on('click', function() {
      $('#cookieNotice').animate({
        height: 0
      }, 300);
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>
    Hello
  </h1>
</div>

＆＃13;

我的问题是，无论如何，通知都显示在顶部。它不会向下滑动，推动＆＃34;你好＆＃34;当页面加载时。我不确定为什么。我错过了什么？

Answer 1

将#cookieNotice更改为#myNotice并使用.slideUp(300)

   $('#acceptButton').on('click', function() {
          $('#myNotice').slideUp(300);
        });

https://jsfiddle.net/ms4au3vn/带有工作示例

Answer 2

尝试此操作以在通知被接受时滑动。

$(document).on('click', '#acceptButton', function() {
   $('#myNotice').animate({
     height: 0
   }, 300);
});

Answer 3

首先你的病情不起作用，只需使用

if(!isAccepted){

因为如 HERE 所述，!==或===运算符会比较值与类型。您试图将字符串与布尔值进行比较，因此它肯定无法正常工作。

此外，您必须将#cookieNotice更改为#myNotice，因为#cookieNotice不存在，因此您的按钮永远不会隐藏通知。

在我的代码段中，我将生成的通知div height = 0px;的样式更改为display: none;，并使用现有的jquery .slideDown和.slideUp让您的通知滑动为您希望在提供更好的可读性的同时（在我看来）。

以下是完整代码：

    $(document).ready(function() {
      var isAccepted = false;
      if (!isAccepted) {
            var notice = '<div><div id="myNotice" class="container" style="display: none;">' +
                'This site uses cookies. ' +
                'Are you ok with this?' +
                '<button id="acceptButton" class="btn btn-secondary">Accept</button>' +
                '</div></div>'
            ;
    
            $('body').prepend(notice);
            $('#myNotice').slideDown(200);
    
            $('#acceptButton').on('click', function() {
                $('#myNotice').slideUp(300);
            });
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <h1>
  Hello
  </h1>
</div>

推下身体负荷

3 个答案: