尝试使用以下

Question

我尝试隐藏我在用户根据Cookie在以下codepen上点击x 30天后构建的通知栏。我似乎无法弄清楚如何做到这一点。 https://codepen.io/Danskii/pen/aWpoRP

HTML：

<div id="top-site-message-wrapper">

<div id="top-site-message">
Members: you can reduce paper consumption by choosing to receive your membership package by email:

<a href="http://www.oct.ca/" id="top-site-message-CTA">  
Yes Please</a>

<button id="top-site-message-hide">
  x
</button>

</div>  
</div>

CSS：

#top-site-message-wrapper {
background-color: #068edb;
padding: 30px 13px 30px 30px;
border-radius: 3px;
max-width: 100%;
font-size: 16px;
font-style: normal;
 font-weight: 600
}

#top-site-message {
color: white;
text-align: center;
}

#top-site-message-CTA {
width: 10%;
color: white;
text-decoration: none;
background: #043d86;
padding: 10px;
border-radius: 3px;
}

#top-site-message-hide {
float: right;
border: none;
color: white;
background-color: blue;
border-radius: 3px;
}

div.yay {
  display: none;
}

button.yay {display: none;
}

JS：

// Selects the FIRST occurance of <button>;
var button = document.querySelector("button");
var element = document.querySelector("div");

button.addEventListener("click", function() {
  element.classList.toggle("yay");
  button.classList.toggle("yay");
});

// Begin script portion for cookies
function TopMessage(){
   days=30;
   myDate = new Date();
   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
   document.cookie = 'TopMessage=Hidden; expires=' + myDate.toGMTString();
}

var cookie = document.cookie.split(';')
    .map(function(x){ return x.trim().split('='); })
    .filter(function(x){ return x[0]==='TopMessage'; })
    .pop();

if(cookie && cookie[1]==='Accepted') {
    $("div.yay").hide();
    $("button.yay").hide();
}

$('.top-site-message-hide').on('click', function(){
    TopMessage();
    return false;
});