Javascript-在MatchMedia查询中克隆和删除元素

问题描述

您好，我正在尝试在matchmedia查询中克隆元素。因此，基本上，它只会在媒体查询为(max-width: 991px)时出现，而在媒体查询不超过(min-width: 992px)时才会删除。但是在按特定分辨率调整页面大小或加载页面时存在问题。示例我在991px上加载页面或调整页面大小。它会克隆，但克隆后会删除。克隆后突然将其移除。我只是将.remove()置于其他状态。

有什么想法或方法吗？

我先谢谢大家。

function media_query() {
    var mmenu_selector = $('#mmenu-app');
    if (window.matchMedia("(max-width: 991px)").matches) {
        var mainmenu_nav = $('.header-main-menu nav.navbar-collapse')
        var clone = mainmenu_nav.clone().insertAfter('.header-main-menu nav.navbar-collapse');
        clone.attr('id','mmenu-app');
        //clean up mmenu by removing bootstrap classes
        mmenu_selector.removeAttr('class');
        mmenu_selector.find('ul').removeClass('navbar-nav nav dropdown-menu animated fadeInDown').removeAttr('id');
        mmenu_selector.find('li').removeClass('nav-item dropdown dropdown-item');
        mmenu_selector.find('li a').removeClass('nav-link dropdown-toggle').removeAttr('data-toggle data-target id');
        // for drupal 8
        mmenu_selector.find('h2').remove();
        // end drupal 8
        setTimeout(function() { 
            var mmenu = new Mmenu(
                document.querySelector( '#mmenu-app' ),{
                    navbars: [
                        {
                            content: ['prev','breadcrumbs','close'],},],extensions: [
                        "position-left","theme-dark",// wrappers: ["bootstrap"],);
        },500);
    } else {
        mmenu_selector.remove();
    }
}

$(window).resize(function() { 
    media_query();
});

$(document).ready(function() {
    media_query();
)};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）