如下圖所示，很多時候，特別是列表頁，受空間限制，不能擠下太多的菜單，這個時候，就需要有下拉菜單 *****  使用下拉菜單前,請確保你的頁面引用了下面的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類名 所封裝容器里寫代碼即可