javascript - 添加关闭按钮 div 以关闭拳击

Question

这是我的 JSFiddle

预览显示在 div 框中。我想在右上角添加关闭选项。如何才能做到当用户点击它时禁用框。

代码片段

.duyurular {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #212121;
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
}
.duyurular > i {
    background-color: #27ae60;
    border-radius: 4px 0 0 4px;
    color: #fff;
    float: left;
    font-size: 16px;
    height: 42px;
    line-height: 42px;
    margin: 0 16px 0 -16px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    width: 42px;
}
.otomesaj {
    float: left;
    font-family: "Exo 2",sans-serif;
    font-size: 13px;
    margin: 1px auto 0;
    padding: 0 5px;
    width: 680px;
}
.otomesaj ul {
    margin: 0;
    padding: 0;
}
.duyurus {
    color: #212121;
    display: none;
    list-style: outside none none;
    text-align: left;
}

<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title=""></i>
<div class="otomesaj" original-title="">
	<ul>
         <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
		<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
        <li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
	</ul>
</div>
</div>

Answer 1

试试这个代码，这可能对你有帮助

$(document).ready(function(){
   $('.right').click(function(){
       $(this).parent().hide('slow');
   })
})

.duyurular {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #212121;
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
}
.duyurular > i {
    background-color: #27ae60;
    border-radius: 4px 0 0 4px;
    color: #fff;
    float: left;
    font-size: 16px;
    height: 42px;
    line-height: 42px;
    margin: 0 16px 0 -16px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    width: 42px;
}
.otomesaj {
    float: left;
    font-family: "Exo 2",sans-serif;
    font-size: 13px;
    margin: 1px auto 0;
    padding: 0 5px;
    width: 680px;
}
.otomesaj ul {
    margin: 0;
    padding: 0;
}
.duyurus {
    color: #212121;
    display: none;
    list-style: outside none none;
    text-align: left;
}
.right{
  position:relative;
  text-align:right;
left:350px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
	<ul>
        <li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
		<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
        <li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
			</ul>
		</div>
   <button class="right">x</button>
</div>