使用英国关闭按钮隐藏/关闭容器

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>

Answer 2

给容器div 一个 id，并添加一个将显示更改为"none"的函数：

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

Answer 3

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