如下图所示,很多时候,特别是列表页,受空间限制,不能挤下太多的菜单,这个时候,就需要有下拉菜单 ***** ![](https://img.kancloud.cn/c9/76/c976050cf5ca1d97ce46104befe69c74_765x600.png) 使用下拉菜单前,请确保你的页面引用了下面的JS `<script type="text/javascript" src="/public/static/js/qibo.js"></script>` 上面的JS是必须的.当然JQ也是必须的 另外,还要引入`<link rel="stylesheet" href="/public/static/css/qb_ui.css">`这个CSS文件,这个CSS文件其实不是必须的,如果没有引用这个CSS文件的话,请自行在你的页面添加下面的CSS元素 ~~~ /*下拉菜单*/ .more-menu-wap{ border: 1px solid #bdd4ea; line-height:170%; background:#d2ecff; color:#000; opacity:0.9; box-shadow: 2px 3px 1px 0px #DDD; } .more-menu-wap>div{ padding:5px 3px; } .more-menu-wap a:hover{ color:red; } ~~~ 确保上面的条件成立后,只需要给任何元素添加一个`class="more-menu"` 同时再加上 `url='<a href="aaa">子菜单一</a> <br> <a href="xxx">子菜单二</a>'` 就可以了。 比如下面的: ~~~ <span class="more-menu" url='<a href="aaa">子菜单一</a> <br> <a href="xxx">子菜单二</a>'>更多</span> ~~~ 特别提醒,`url` 还可以指定一个实际的url给他异步赋值的,比如 ~~~ <span class="more-menu" url='abc.htm'>更多</span> ~~~ 这个`abc.htm`输出的内容如下 `{code:0,data:'子菜单内容'}` 即json格式 如果是在程序中处理的话,你用下面的格式返回数据即可`return $this->ok_js('二级菜单内容');` 异步传值有什么好处呢?可以根据不同的用户组显示不同的菜单。另外也方便在静态页比如单页里边使用,按不同的权限给不同的菜单。 另外还有一点特别要注意,如果二级菜单内容写在当前页面的话,遇到JS又要同时使用单引或双引号的话,容易跟`url`使用的引用号发生冲突,这个时候JS里边建议使用这个符号 ` 即键盘上数字1左边那个符号。比如下面的 ~~~ <span class="more-menu" url='<a href="#" onclick="alert(`测试哦`)">子菜单一</a> <br> <a href="xxx">子菜单二</a>'>更多</span> ~~~ 大家注意看 ~~~ alert(`测试哦`) ~~~ ,子菜单一 要使用js并且要使用字符串的话,即不能再使用双引号,也无法再使用单引号,这个时候就只能使用 ` 这个符号了,即键盘上数字1左边那个符号。当然,如果是url实际地址异步传值的话,就不受这个影响