Question

我有两个“ul”列表。使用javascript从第二个列表中删除子项并添加到第一个ul列表中。但是在页面加载时，第二个菜单显示没有样式。请参阅here和web

这是代码。 #main-menu和#section菜单是ul列表：

//dinamyc main menu
    if( $('body').hasClass('page-template-templateshome-page-php') ){
        $('#section_menu').children().each(function(i, e){
            var firstLi = '#' + $('.navbar').next().attr("id");
            $('.home .menu-item-home a').removeClass('external').attr( "href", firstLi );

            if($('#main-menu div ul li').is($(e).insertAfter('#main-menu ul li:eq(0)'))){
                $(e).insertAfter('#main-menu ul:eq(0)');
            }

            $('#section_menu').css('display','none');

        });
    }else{
        $('#section_menu ').children().remove();
        $('#section_menu').remove();
    }

CSS：

#section_menu { display:none; }

Answer 1

<div id="hidden-during-page-load">Loading...</div>

$(window).load(function(){
  // this will ensure that all content has loaded before the div is shown
  $("#hidden-during-page-load").show();
});

#hidden-during-page-load {
    display:none;   
}

Answer 2

试试这个

<div id="mydiv" style="disply:none">somedata</div>

然后随时随地制作div。如果要在页面加载中显示它，

$(document).ready(function(){
 //after executing some functions
  $("#mydiv").show()
  });

Answer 3

您是否尝试在每个功能中放置一个断点？这证实了这个过程导致了故障。（或者你也可以添加一点延迟）设置断点并执行到目前为止所做的操作，如果菜单保持这种状态直到您继续，则表示您需要更改逻辑：在处理过程中隐藏菜单并仅在过程完成时显示。

Answer 4

您可以创建一个css规则来隐藏第二个列表，例如：

.hidden-list {
    visibility: hidden
}

如果您在加载后想要查看第二个列表，只需听取ready事件并删除该类。

$(document).ready( function($) {
    $('ul').removeClass('hidden-list'))
    // Do something else if needed
});

在页面加载时隐藏div

4 个答案: