html - 使用 uk-close 按钮​​隐藏/关闭容器

Question

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

<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

uk-close 仅适用于模态框，但您仍然可以使用 uk-toggle 打开/关闭您想要的任何元素。您需要为您的容器分配 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>