html - 关闭按钮不关闭 onclick bootstrap

标签 html css

下面是我测试这段代码的笔。但我不知道代码中的问题在哪里。

这是我放置此代码的笔链接。

https://codepen.io/codeslide/pen/xvRomW

有没有人帮助解决这个问题，我是新手，但会继续努力做得更好。 当我单击关闭按钮时， strip 没有关闭。 感谢您的建议。

内置 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 &amp; 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 &amp; 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>

关于html - 关闭按钮不关闭 onclick bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57241384/

上一篇：css - 我在部署时缺少 CSS 中的特定属性值。为什么？

下一篇：html - Chrome 和 Firefox 中的导航栏样式正常，但在 IE 中我有问题

相关文章：

html - 以 % 和填充为单位的 DIV 宽度

javascript - 如何使函数与相同的类一起工作？

css - body 标签中的多个类、多维 css 结构或精神错乱的蓝图？

html - 如果 div 具有相对位置元素，是否可以增长它？

html - 调整窗口大小时居中图像

javascript - HtmlService : google. script.run 无法识别 gs 函数

javascript - 单击 anchor 标记时添加效果

html - 如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定(bind)？

html - 使用 CSS 文件进行站点本地化

javascript - 加载 JavaScript 后注入(inject) css

©2024 IT工具网  联系我们