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

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

![](https://img.kancloud.cn/c9/76/c976050cf5ca1d97ce46104befe69c74_765x600.png)

使用下拉菜单前,请确保你的页面引用了下面的JS
`<script type="text/javascript" src="/public/static/js/qibo.js"></script>`
上面的JS是必须的.当然JQ也是必须的
另外,还要引入``这个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>  子菜单二</a>'` 就可以了。
比如下面的：
~~~
更多
~~~
特别提醒，`url` 还可以指定一个实际的url给他异步赋值的，比如
~~~
更多
~~~
这个`abc.htm`输出的内容如下
`{code:0,data:'子菜单内容'}` 即json格式
如果是在程序中处理的话，你用下面的格式返回数据即可`return $this->ok_js('二级菜单内容');`
异步传值有什么好处呢？可以根据不同的用户组显示不同的菜单。另外也方便在静态页比如单页里边使用，按不同的权限给不同的菜单。

另外还有一点特别要注意，如果二级菜单内容写在当前页面的话，遇到JS又要同时使用单引或双引号的话，容易跟`url`使用的引用号发生冲突，这个时候JS里边建议使用这个符号 ` 即键盘上数字1左边那个符号。比如下面的
~~~
更多
~~~
大家注意看
~~~
alert(`测试哦`)
~~~

，子菜单一 要使用js并且要使用字符串的话，即不能再使用双引号，也无法再使用单引号，这个时候就只能使用 ` 这个符号了，即键盘上数字1左边那个符号。当然，如果是url实际地址异步传值的话，就不受这个影响。

*****
如果代码太复杂，又不想使用 ` 符号的话，还有另外一种更高级的用户法。如下图所示

![](https://img.kancloud.cn/4b/06/4b06cd19b822a74737fe5c837b1d0785_1107x201.png)
参考代码如下
```
商品货架</a>							添加内容</a> 				管理内容</a> 			
```

也即是 `url`参数除了可以定义具体URL或者是实际HTML代码之外，还可以定义一个唯一的class类名。然后在页面任何位置放入相应的 由这个 唯一的class类名 所封装容器里写代码即可

本文链接：https://x1.wanxiangsucai.com/read/79.html

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

相关文章推荐

齐博X1教程专栏最新文章

齐博X1教程专栏文章推荐

建站工具推荐

您可能感兴趣的文章