html - 关闭按钮未关闭 onclick 引导程序
问题描述
下面是我测试这段代码的笔。但我不知道代码中的问题在哪里。
这是我放置此代码的笔链接。
https://codepen.io/codeslide/pen/xvRomW
有人帮助解决这个问题吗?我是新手,但请继续努力做得更好。当我单击关闭按钮时,条带未关闭。感谢您的建议。
内置html和css。
CSS 代码
.headerstrip-wrapper {
height: 50px;
position: relative;
}
.headerstrip-wrapper .headerstrip__banner-dismiss {
width: 12px;
height: 12px;
background: none;
border: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 0;
position: absolute;
font: inherit;
height: 100%;
line-height: 0;
cursor: pointer;
outline: inherit;
opacity: 0.4;
padding: 0 16px;
color: white;
text-decoration: none;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
right: 0;
top: 0;
z-index: 2;
}
.headerstrip-wrapper .headerstrip__banner-dismiss:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.headerstrip-wrapper .headerstrip__banner-dismiss svg {
fill: #000000;
}
.headerstrip {
display: block;
height: 50px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”,sans-serif;
font-size: 14px;
position: relative;
text-decoration: none;
z-index: 1;
}
.headerstrip .headerstrip-content-background {
background-color: #fff;
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2930b4; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #2930b4, #2a9eb0); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #2930b4, #2a9eb0); /* Standard syntax */
background-repeat: repeat-x;
}
.headerstrip .headerstrip-canvas {
height: 50px;
margin: auto auto;
}
.headerstrip .headerstrip-content {
display: flex;
align-items: center;
justify-content: center;
background-size: contain;
background-repeat: no-repeat;
background-size: 1000px 50px;
width: 100%;
height: 50px;
max-width: 1408px;
padding-left: 16px;
padding-right: 16px;
margin: 0 auto;
}
.headerstrip .headerstrip-text {
color: #FFFFFF;
text-decoration: none;
padding-right: 24px;
font-weight: 200;
letter-spacing: 0.8px;
position: relative;
}
.headerstrip .headerstrip-text strong {
font-weight: 600;
}
.headerstrip .headerstrip-cta-container {
display: flex;
}
.headerstrip .headerstrip-cta {
position: relative;
background-color: #FC9F97;
padding: 5px 30px;
color: #2d2d2d;
font-weight: 600;
border-radius: 4px;
text-decoration: none;
display: block;
text-align: center;
min-width: 100px;
}
.headerstrip .headerstrip-cta-mobile {
color: #FFFFFF;
text-decoration: underline;
padding-left: 5px;
}
.headerstrip .headerstrip-cta-mobile:hover {
color: #FFFFFF;
}
.headerstrip .is-hidden-desktop .headerstrip-content {
text-align: center;
}
.headerstrip .is-hidden-desktop .headerstrip-text {
position: relative;
padding-right: 24px;
}
.headerstrip .is-hidden-desktop .headerstrip__banner-dismiss {
margin-left: 0;
}
.headerstrip .headerstrip__dismiss-icon {
width: 12px;
height: 12px;
fill: #FFFFFF;
display: inline-block;
}
@media (max-width: 1024px) {
.headerstrip .is-hidden-tablet-and-below {
display: none !important;
}
}
@media (min-width: 1025px) {
.headerstrip .is-hidden-desktop {
display: none !important
}
}
<strong>Html code</strong>
<div class="banner-root">
<div class="banner-container">
<div class="headerstrip-wrapper">
<button title="dismiss" type="button" class="js-banner__dismiss headerstrip__banner-dismiss">
<svg class="headerstrip__dismiss-icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8 2.4c.3.3.3.8 0 1.1l-6 6c-.3.3-.3.8 0 1.1l6 6c.3.3.3.8 0 1.1l-2.2 2.2c-.3.3-.8.3-1.1 0l-6-6c-.3-.3-.8-.3-1.1 0l-6 6c-.3.3-.8.3-1.1 0L.1 17.7c-.3-.3-.3-.8 0-1.1l6-6c.3-.3.3-.8 0-1.1l-6-6c-.3-.3-.3-.8 0-1.1L2.3.2c.3-.3.8-.3 1.1 0l6 6c.3.3.8.3 1.1 0l6-6c.3-.3.8-.3 1.1 0l2.2 2.2z"></path>
</svg>
</button>
<a class="headerstrip js-banner__link" href="https://market.codeslide.in/">
<div class="headerstrip-content-background"></div>
<div class="headerstrip-canvas is-hidden-desktop">
<div class="headerstrip-content">
<div class="headerstrip-text">
Codeslide!
<span class="js-banner__link headerstrip-cta-mobile" href="https://market.codeslide.in/">From $0.00/m</span>
</div>
</div>
</div>
<div class="headerstrip-canvas is-hidden-tablet-and-below">
<div class="headerstrip-content">
<div class="headerstrip-text">
<strong>Codeslide!</strong> Unlimited plugin, WordPress & web template downloads!
</div>
<span class="js-banner__link headerstrip-cta" href="https://market.codeslide.in/">From $0.00/m</span>
</div>
</div>
</a>
</div>
</div>
</div>
解决方案
您忘记在代码中添加以下脚本。
var closeButtons = $('.headerstrip__banner-dismiss');
closeButtons.on('click', function() {
$(this).parent().hide();
});
这是片段:
.headerstrip-wrapper {
height: 50px;
position: relative;
}
.headerstrip-wrapper .headerstrip__banner-dismiss {
width: 12px;
height: 12px;
background: none;
border: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 0;
position: absolute;
font: inherit;
height: 100%;
line-height: 0;
cursor: pointer;
outline: inherit;
opacity: 0.4;
padding: 0 16px;
color: white;
text-decoration: none;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
right: 0;
top: 0;
z-index: 2;
}
.headerstrip-wrapper .headerstrip__banner-dismiss:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.headerstrip-wrapper .headerstrip__banner-dismiss svg {
fill: #000000;
}
.headerstrip {
display: block;
height: 50px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”,sans-serif;
font-size: 14px;
position: relative;
text-decoration: none;
z-index: 1;
}
.headerstrip .headerstrip-content-background {
background-color: #fff;
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2930b4; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #2930b4, #2a9eb0); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #2930b4, #2a9eb0); /* Standard syntax */
background-repeat: repeat-x;
}
.headerstrip .headerstrip-canvas {
height: 50px;
margin: auto auto;
}
.headerstrip .headerstrip-content {
display: flex;
align-items: center;
justify-content: center;
background-size: contain;
background-repeat: no-repeat;
background-size: 1000px 50px;
width: 100%;
height: 50px;
max-width: 1408px;
padding-left: 16px;
padding-right: 16px;
margin: 0 auto;
}
.headerstrip .headerstrip-text {
color: #FFFFFF;
text-decoration: none;
padding-right: 24px;
font-weight: 200;
letter-spacing: 0.8px;
position: relative;
}
.headerstrip .headerstrip-text strong {
font-weight: 600;
}
.headerstrip .headerstrip-cta-container {
display: flex;
}
.headerstrip .headerstrip-cta {
position: relative;
background-color: #FC9F97;
padding: 5px 30px;
color: #2d2d2d;
font-weight: 600;
border-radius: 4px;
text-decoration: none;
display: block;
text-align: center;
min-width: 100px;
}
.headerstrip .headerstrip-cta-mobile {
color: #FFFFFF;
text-decoration: underline;
padding-left: 5px;
}
.headerstrip .headerstrip-cta-mobile:hover {
color: #FFFFFF;
}
.headerstrip .is-hidden-desktop .headerstrip-content {
text-align: center;
}
.headerstrip .is-hidden-desktop .headerstrip-text {
position: relative;
padding-right: 24px;
}
.headerstrip .is-hidden-desktop .headerstrip__banner-dismiss {
margin-left: 0;
}
.headerstrip .headerstrip__dismiss-icon {
width: 12px;
height: 12px;
fill: #FFFFFF;
display: inline-block;
}
@media (max-width: 1024px) {
.headerstrip .is-hidden-tablet-and-below {
display: none !important;
}
}
@media (min-width: 1025px) {
.headerstrip .is-hidden-desktop {
display: none !important
}
}
<strong>Html code</strong>
<div class="banner-root">
<div class="banner-container">
<div class="headerstrip-wrapper">
<button title="dismiss" type="button" class="js-banner__dismiss headerstrip__banner-dismiss">
<svg class="headerstrip__dismiss-icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8 2.4c.3.3.3.8 0 1.1l-6 6c-.3.3-.3.8 0 1.1l6 6c.3.3.3.8 0 1.1l-2.2 2.2c-.3.3-.8.3-1.1 0l-6-6c-.3-.3-.8-.3-1.1 0l-6 6c-.3.3-.8.3-1.1 0L.1 17.7c-.3-.3-.3-.8 0-1.1l6-6c.3-.3.3-.8 0-1.1l-6-6c-.3-.3-.3-.8 0-1.1L2.3.2c.3-.3.8-.3 1.1 0l6 6c.3.3.8.3 1.1 0l6-6c.3-.3.8-.3 1.1 0l2.2 2.2z"></path>
</svg>
</button>
<a class="headerstrip js-banner__link" href="https://market.codeslide.in/">
<div class="headerstrip-content-background"></div>
<div class="headerstrip-canvas is-hidden-desktop">
<div class="headerstrip-content">
<div class="headerstrip-text">
Codeslide!
<span class="js-banner__link headerstrip-cta-mobile" href="https://market.codeslide.in/">From $0.00/m</span>
</div>
</div>
</div>
<div class="headerstrip-canvas is-hidden-tablet-and-below">
<div class="headerstrip-content">
<div class="headerstrip-text">
<strong>Codeslide!</strong> Unlimited plugin, WordPress & web template downloads!
</div>
<span class="js-banner__link headerstrip-cta" href="https://market.codeslide.in/">From $0.00/m</span>
</div>
</div>
</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
var closeButtons = $('.headerstrip__banner-dismiss');
closeButtons.on('click', function() {
$(this).parent().hide();
});
</script>
推荐阅读
- permissions - 如何允许客户端用户无法删除且只能修改的文档?
- dynamics-365 - 获取 XML SSRS 报告
- c++ - 我不知道为什么我的 if else 语句在要求 cin 时终止
- jquery - 减少 if else 功能检查
- python - Python & MySQL - 带变量的 SELECT
- docker - 当我尝试使用我的 docker 文件为 itx 版本 9 构建 docker 映像时,我得到 '" apt-get install ksh' 返回一个非零代码:1" 错误
- scala - 带有构造函数参数的抽象工厂模式
- raspberry-pi - Raspbian:无法使用 miniconda 安装 python 3.6
- javascript - 移动日期但跳过日期选择器 j 查询中的禁用日期?
- django - 问题:“日期时间”类型的对象不是 JSON 可序列化的