0

我的代码中有一个卡片容器。我添加了一个“关闭”按钮，当我单击它时我想关闭它。我不确定如何完成这项工作，我一直在网上查看很多文章。

这是我的卡片的屏幕截图，带有关闭图标

我有以下代码：

<div class="card" style="border: 2px black solid">
<div class="card-header container-fluid" id="newsHeading">
    <div class="row">
        <div class="col">
            <h3>News Items</h3>
        </div>
        <div class="col">
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
    </div>
</div>

是否有执行此操作的 html/css 方法，或者我是否必须添加一些 JS/JQ 逻辑才能使其工作？

任何帮助将非常感激！:)

更新：

我在我的 html 代码下添加了以下代码。这是一个快速而简单的修复。 

<script>
    $('.close').click(function(){
       $('#newsHeading').parent().fadeOut();
    })
</script>
4

2 回答 2

1

这不是 bootstrap 的标准特性，所以需要给图标绑定一个 JS 点击事件。

$('.close-icon').on('click',function() {
  $(this).closest('.card').fadeOut();
})
.close-icon {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card card-outline-danger text-center">
  <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

如何将关闭按钮添加到引导卡？

要在没有任何 Js 点击事件的情况下使用此关闭功能，请使用带有属性的引导模式data-dismiss

于 2019-12-17T16:28:33.523 回答
1

您可以在标题和父项的 id 上使用带有 .hide( )或.slideUp()的 jquery .click()事件来访问该卡。

$('.close').click(function(){
  $('#newsHeading').parent().slideUp();
})

css 中没有父选择器，因此使用子节点来改变父节点的显示通常需要其他东西（JavaScript）来通过 DOM 工作。

于 2019-12-17T16:29:25.353 回答