推下身體

Question

我有一個包含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); 
 
    }); 
 
    } 
 
});

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

我的問題是，該通知顯示在頂部不管。它不會滑落，在頁面加載時向下推「Hello」。我不知道爲什麼。我錯過了什麼？

Answer 1

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

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>

Answer 2

變化#cookieNotice到#myNotice和使用.slideUp(300)

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

https://jsfiddle.net/ms4au3vn/與工作示例

Answer 3

試試這個時候它的接受效果基本show通知。

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