如下图所示，很多时候，特别是列表页，受空间限制，不能挤下太多的菜单，这个时候，就需要有下拉菜单 *****  使用下拉菜单前,请确保你的页面引用了下面的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实际地址异步传值的话，就不受这个影响。 ***** 如果代码太复杂，又不想使用 ` 符号的话，还有另外一种更高级的用户法。如下图所示  参考代码如下 ``` <a class="more-menu" url="topic_menu_{$rs.id}">商品货架</a> <div class="topic_menu_{$rs.id}" style="display:none;"> <a href="javascript:;" onclick="act('add','{$rs.id}')">添加内容</a> <br> <a href="javascript:;" onclick="act('index','{$rs.id}')">管理内容</a> </div> ``` 也即是 `url`参数除了可以定义具体URL或者是实际HTML代码之外，还可以定义一个唯一的class类名。然后在页面任何位置放入相应的 由这个 唯一的class类名 所封装容器里写代码即可