layui導(dǎo)航欄二級(jí)菜單不顯示問(wèn)題及解決
更新時(shí)間：2023年05月19日 10:34:36 作者：清啊清小青
這篇文章主要介紹了layui導(dǎo)航欄二級(jí)菜單不顯示問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
layui導(dǎo)航欄二級(jí)菜單不顯示
問(wèn)題描述
在使用layui 中的導(dǎo)航欄組件時(shí)，除了 默認(rèn)打開的第一個(gè)，其他的導(dǎo)航只能顯示出一級(jí)的導(dǎo)航，
原因
查看layui 的官方文檔，可以發(fā)現(xiàn)layui 的導(dǎo)航目錄時(shí)依賴于element 的，所以我們需要?jiǎng)?chuàng)建一個(gè)element
解決方法
創(chuàng)建layui 下的element 即可
示例代碼
1.Vue 項(xiàng)目中：
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a _href='#'>
<i class="layui-icon layui-icon-home"></i>
<cite>首頁(yè)</cite>
</a>
<dl class="layui-nav-child">
<dd>
<a _index="0">項(xiàng)目介紹</a>
</dd>
<dd>
<a _index="1">分析頁(yè)</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a _href='#' v-on:click="chufa">
<i class="layui-icon layui-icon-set-fill"></i>
<span>系統(tǒng)管理</span>
</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >用戶管理</a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >角色管理</a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單管理</a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄日志</a>
</dd>
</dl>
</li>
</ul>2.需要添加的代碼如下：
在當(dāng)前Vue 文件的mounted鉤子函數(shù)中添加以下的代碼：
mounted() {
this.$nextTick(() => {
//導(dǎo)航欄依賴于 element 因此下面的代碼是必須的否則二級(jí)導(dǎo)航內(nèi)容就會(huì)不顯示
layui.use("element", function() {
var element = layui.element;
});
});結(jié)果對(duì)比
1.沒加代碼之前
2.加上代碼之后：
layui中的一些問(wèn)題
使用layui（版本號(hào)2.4.5）,在引入js,css之后：
水平導(dǎo)航欄二級(jí)菜單一直不能顯示
<script>
? ? ? ? layui.use('element', function(){
? ? ? ? ? ? var element = layui.element;
? ? ? ? ? ? element.on('nav(filter)', function(elem){
? ? ? ? ? ? ? ? console.log(elem); //得到當(dāng)前點(diǎn)擊的DOM對(duì)象
? ? ? ? ? ? });
? ? ? ? });
? ? </script>解決辦法：最后發(fā)現(xiàn)layui.all.js引入不能放在head標(biāo)簽內(nèi)，需要在body最后面引入即可。
使用layer.open 中的iframe彈框，關(guān)閉失敗的問(wèn)題
最開始解決辦法，根據(jù)官網(wǎng)示例：即
var index = layer.open({
?? ?……
});
layer.close(index)；/ ? layer.closeAll()但是使用這種兩種方法發(fā)現(xiàn)怎么都關(guān)閉不了，后來(lái)再仔細(xì)看官方文檔時(shí)發(fā)現(xiàn)關(guān)閉iframe 需要使用下面的方法
//當(dāng)你在iframe頁(yè)面關(guān)閉自身時(shí) var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引 parent.layer.close(index); //再執(zhí)行關(guān)閉 ??
最后測(cè)試完美解決
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
js獲取指定日期前后的日期，在實(shí)際應(yīng)用中還是比較實(shí)用的，下面為大家簡(jiǎn)單介紹下具體的實(shí)現(xiàn)過(guò)程，有需要的朋友可以參考下2013-08-08
利用策略模式與裝飾模式擴(kuò)展JavaScript表單驗(yàn)證功能
這篇文章主要介紹了利用策略模式與裝飾模式擴(kuò)展JavaScript表單驗(yàn)證功能,需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
javascript中的數(shù)字與字符串相加實(shí)例分析
javascript中的數(shù)字與字符串相加實(shí)例分析，學(xué)習(xí)js的朋友可以參考下。2011-08-08
JavaScript作用域全面總結(jié)(附詳細(xì)代碼)
JavaScript的作用域一直以來(lái)是前端開發(fā)中比較難以理解的知識(shí)點(diǎn),下面這篇文章主要介紹了JavaScript作用域全面總結(jié)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-11-11
表單切換，用回車鍵替換Tab健。input的屬性tab的值表示切換的順序，這個(gè)值必須是連續(xù)的，并且不能重復(fù)。目前不支持IE2011-07-07
微信小程序wxss如何引用外部CSS文件以及iconfont
這篇文章主要給大家介紹了關(guān)于微信小程序wxss如何引用外部CSS文件以及iconfont的相關(guān)資料，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家詳細(xì)介紹了js表單驗(yàn)證，JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì)HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript中實(shí)現(xiàn)new的兩種方式引發(fā)的探究
眾所周知JS中new的作用是通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)實(shí)例對(duì)象，這篇文章主要給大家介紹了關(guān)于JavaScript中實(shí)現(xiàn)new的兩種方式引發(fā)的相關(guān)資料，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
js實(shí)現(xiàn)淘寶首頁(yè)的banner欄效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)淘寶首頁(yè)的banner欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11