快捷導(dǎo)航

解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題

更新時間：2019年09月25日 15:16:35 作者：饅頭君一號

今天小編就為大家分享一篇解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天在使用Layui導(dǎo)航條動態(tài)添加的時候，發(fā)現(xiàn)動態(tài)添加后沒有辦法再次渲染他的效果，原因未知，但是已經(jīng)解決了，這里利用的方式是將它渲染出來的span.layui-nav-bar樣式利用DOM先刪除掉再重新渲染，直接貼圖看結(jié)果

<ul class="layui-nav" id="nav" layui-filter="test"></ul>

js代碼

$(function () {
      $.ajax({
        url: '/Main/GetType1',
        success: function (da) {
          //重點地方，將Layui在頁面加載時渲染出來的span.layui-nav-bar提前刪除掉
          $("#nav").find('span.layui-nav-bar').remove();
          $.each(da, function (index, value) {
            var name = da[index]['name'];
            var id=da[index]['id'];
            var $li = $("<li class='layui-nav-item' id='t"+id+"'><a href='javascript:;'>" + name + "</a></li>");
            $("#nav").append($li);
            //addul("t" + id, id);
          })
          //列表添加完后再次執(zhí)行渲染
          xuanran();
        }
      })
    })
 
function xuanran() {
      layui.use('element', function () {
        var element = layui.element;
        var layFilter = $("#nav").attr('lay-filter');
        element.render('nav', layFilter);
      })
    }

這樣就解決了問題！

以上這篇解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)的經(jīng)典文件樹菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)的經(jīng)典文件樹菜單效果,通過JavaScript結(jié)合json數(shù)組實現(xiàn)文件樹菜單的效果,非常簡單實用,需要的朋友可以參考下
2015-09-09
微信小程序?qū)崿F(xiàn)簡單的吸頂效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單的吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
快速排序 php與javascript的不同之處
告訴你一個排序算法，也許是最重要的是他們知道 - 快速排序，無論是在PHP和JavaScript實現(xiàn)的。雖然這兩種語言之間的代碼看起來相似，也有一些差異，這表明了語法知識的重要性！
2011-02-02
微信小程序3種位置API的使用方法詳解
這篇文章主要介紹了微信小程序3種位置API的使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-08-08
JavaScript編制留言簿程序代碼
也許你有一個很酷的主頁，很希望與人分享。同時，你希望訪問你主頁的人能對你的主頁提供一些意見和建議，或者你對某個主題感興趣，而希望客人也許能給你一幫助，這就要用到留言簿。留言簿使得你能與每一個訪問你主頁的人交換信息。
2008-09-09
本篇文章主要介紹了微信小程序-提示框，現(xiàn)在分享給大家，也給大家做個參考。感興趣的小伙伴們可以參考一下。
2016-11-11