html - 关闭 Bootstrap 卡片容器

Question

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

我有以下代码:

<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>

Answer 1

您可以在 id 上使用带有 .hide() 或 .slideUp() 的 jquery .click() 事件header 和 parent 以访问该卡。

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

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