企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
## 弹出式菜单 ### 基本类名 `.mui-actionsheet` ### 使用方式 #### HTML ```html <div class="mui-actionsheet" id="demo-mui-actionsheet"> <div class="mui-actionsheet--overlay js-mui-actionsheet--close"></div> <div class="mui-actionsheet--body"> <div class="mui-actionsheet--menu"> <div class="mui-actionsheet--item">示例菜单</div> <div class="mui-actionsheet--item">示例菜单</div> <div class="mui-actionsheet--item">示例菜单</div> <div class="mui-actionsheet--item">示例菜单</div> </div> <div class="mui-actionsheet--action"> <div class="mui-actionsheet--item js-mui-actionsheet--close">取消</div> </div> </div> </div> ``` #### 展开 只需给 `mui-actionsheet` 添加 `mui-actionsheet--open` 样式, 关闭,则移除该样式 #### 示例 ```javascript var $actionsheet = document.getElementById('demo-mui-actionsheet'); //打开 document.getElementById('js-actionsheet').addEventListener('click', function () { $actionsheet.classList.add('mui-actionsheet--open'); }); //关闭 [].forEach.call(document.getElementsByClassName('js-mui-actionsheet--close'), function(node) { node.addEventListener('click', function () { $actionsheet.classList.remove('mui-actionsheet--open'); }); }); ```