UIkit Offcanvas点击遮罩层无法关闭怎么办？

Mr.燕伟提问于 2026-02-09 17:16:31 阅读 16

组件

在项目里用了UIkit的Offcanvas侧边栏，按照文档写好HTML结构后，点击触发按钮能正常弹出，但点了遮罩层和关闭按钮都没反应。我检查过HTML结构，data-uk-offcanvas属性也加了，还试过手动调用JS方法关闭，但遮罩层点击就是没响应，这是怎么回事？


<button class="uk-button" type="button" uk-toggle="target: #offcanvas">打开侧边栏</button>

<div id="offcanvas" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        侧边栏内容
    </div>
</div>

我甚至在控制台用UIkit.offcanvas.getInstance(document.getElementById('offcanvas')).show()测试过，弹出没问题，就是无法通过点击关闭。有没有可能和自定义CSS冲突了？或者需要额外配置什么选项？

我来解答赞 5 收藏

反馈

1 条解答

西门书妍 Lv1

试试看把 uk-toggle 换成 data-uk-toggle，你现在的写法是 UIkit 3 的属性，但看起来像混用了命名方式。把按钮改成这样：

<button class="uk-button" type="button" data-uk-toggle="target: #offcanvas">打开侧边栏</button>

另外确认页面有没有重复引入 UIkit JS 或者其他库冲突，遮罩层不响应基本就是初始化失败。

2026-02-09 18:07