推下身体负荷

时间:2017-07-19 15:24:24

标签: javascript jquery

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



$(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;
&#13;
&#13;

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

3 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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>