在模板中快速添加下拉菜单

如下图所示，很多时候，特别是列表页，受空间限制，不能挤下太多的菜单，这个时候，就需要有下拉菜单

使用下拉菜单前,请确保你的页面引用了下面的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类名所封装容器里写代码即可