Hide/close 使用英国关闭按钮的容器

Question

是否可以使用 uk-close 按钮关闭容器？我找到了关闭警报和对话框的示例，但是如何 close/hide 容器？

<div class="uk-container uk-position-center">
  <div class="uk-width-xxlarge uk-height-large uk-card uk-card-body uk-card-default ">

    <button class="uk-close-large" type="button" uk-close></button>
      testing testing testing testing testing testing testing testing testing testing testing testing testing testing tetesting testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing sting testing testing testing testing testing

  </div>
</div>

Answer 1

给容器 div 一个 id 并添加一个将显示更改为 'none':

的函数

document.getElementById("myDIV").style.display = "none";

Answer 2

<button class="uk-close-large" type="button" onclick="document.getElementsByClassName('uk-container').style.display='none'"></button>

Answer 3

uk-close 仅适用于模态框，但您仍然可以使用 uk-toggle 到 open/close 任何您想要的元素。您需要为您的容器分配 ID，然后您可以使用 uk-toggle="target: #id" 切换它，如示例所示。这可能不是最佳解决方案，因为它需要添加容器 ID 和 uk-toggle，因此也许为该按钮自定义事件侦听器会更好。

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit-icons.min.js"></script>

<div class="uk-container uk-position-center" id="toggled-container">
    <div class="uk-width-xxlarge uk-card uk-card-body uk-card-default">
      <button class="uk-close-large uk-align-right" type="button" uk-close uk-toggle="target: #toggled-container"></button>
      <p>testing testing testing testing testing testing testing testing testing testing testing testing testing testing tetesting testing testing testing testing testing testing testing testing testing testing testing testing</p>
    </div>
</div>

Hide/close 使用英国关闭按钮的容器

Hide/close container using uk-close button

html

css

getuikit