我的 div 块没有向下推送页面内容，javascript 也没有关闭 div 块

Question

您好，我正在尝试创建一个用于捐赠的横幅添加块。此div 块应向下推送页面内容。还有一个关闭按钮可以关闭横幅。但是，关闭按钮不起作用。在横幅.js文件中，我正在侦听单击并向每个div添加一个横幅隐藏类以关闭横幅。 有人可以帮忙吗？我在这里包括html css和javascript代码块。

.html：

<div id="alert-banner" class="banner banner-top alert-primary" role="banner">
<div class="p-4 align-self-end" style="max-width:30em">
<h1 class="pb-4">Help us wake up to a 2020 that changes the way we see vision loss!</h1>
<div class="text-center text-md-left"><a class="btn btn-donate text-center" style="min-width: 14em;" href="https://secure.everyaction.com/">Make a Donation</a>
</div>
</div>
</div>

横幅.js：

$(function() {
var add - banner = $('#alert-banner');
var btnClose = $('.banner-close');
btnClose.addEventListener("click", function(closeEvt) {
$(".banner").addClass("banner-hide");
$(".p-4").addClass("banner-hide");
$(".text-center").addClass("banner-hide");
});
});

横幅.css

.banner {
position: relative;
width: 100%;
text-align: center;
padding: 8px;
padding-top: 0px;
background-color: rgba(0, 0, 0, 0.5);
max-height: 100px; /* set it at will according to your message's length 
in small devices */
top: 0px;
left: 0px;
right: 0px;
border: 1px solid transparent;
border-radius: .25rem;
outline: none !important;
display: block;
}
.banner * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.banner-bottom {
left: 0;
right: 0;
bottom: 10px;
}
.banner-top {
left: 0;
right: 0;
top: 10px;
}
.banner-right {
right: 10px;
bottom: 10%;
min-height: 10vh;
}
.banner-left {
left: 10px;
bottom:  10%;
min-height: 10vh;
}
.alert-primary {
text-align: left;
vertical-align: middle;
display: inline-block;
white-space: normal;
max-width: 100%;
max-height: 100%;
outline: none !important;
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.banner-close {
width: 35px;
height: 35px;
position: fixed;
right: 0;
top: 0;
-webkit-appearance: none;
cursor: pointer;
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner-close::-moz-focus-inner {
border: 0;
padding: 0;
}
.banner-close:hover,
.banner-close:focus,
.banner-close:active,
.banner-close:visited {
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner-close:active {
top: 1px;
}

Answer 1

请按照评论中的建议将缺少的元素添加到您的问题中。 我不知道你的变量是怎么回事，但有一种更简单的方法可以做你想要的。 我冒昧地为按钮添加了html，并使用了您那里的css。 你可以看到它在这个jsfiddle中工作。如您所见，lorem ipsum内容被下推。

这是我建议的js函数：

$(document).ready(function() {
$('.banner-close').click(function(e) {
e.preventDefault();
$("#alert-banner").hide();
});
});

这是我为测试目的修改 HTML 的方式：

<div id="alert-banner" class="banner banner-top alert-primary" role="banner">
<div class="p-4 align-self-end" style="max-width:30em">
<h1 class="pb-4">Help us wake up to a 2020 that changes the way we see vision loss!</h1>
<div class="text-center text-md-left"><a class="btn btn-donate text-center" style="min-width: 14em;" href="https://secure.everyaction.com/">Make a Donation</a>
</div>
<div>
<button type="button" class="banner-close" data-dismiss="alert" aria-label="Close">&times;</button>
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>