单击时通知栏不关闭

Question

尝试在页面的页脚创建隐私政策通知栏，并且只对新访问者显示。希望在点击接受时关闭通知。现在该栏显示在页面底部，但我似乎无法让通知栏在点击时关闭。

<span class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.
  </div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</span>

JS

$(".banner").fadeIn("slow").append(".container");
$(".dismiss").click(function(){
   $(".banner").fadeOut("slow");
});

Answer 1

将您的跨度更改为 div？让你的 fadeOut 工作。

<div class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.</div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</div>

Answer 2

将您的代码包装在文档就绪函数中

$(document).ready(function(){

$(".banner").fadeIn("slow").append(".container");
$(".dismiss").click(function(){
   $(".banner").fadeOut("slow");
});
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.
  </div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</span>