第一次加载时菜单项分散。 寻找隐藏组件的方法,直到它完全加载并适合页面。
<script>
require([ "dijit/DropDownMenu", "dijit/MenuSeparator",
"dijit/PopupMenuItem", "dijit/MenuItem",
"dijit/TooltipDialog" ]);
</script>
<div data-dojo-type="dijit.DropDownMenu" id="navMenu" >
<div data-dojo-type="dijit.MenuItem" class="item dijitMenuItemSelected">Home</div>
<div data-dojo-type="dijit.PopupMenuItem" class="item">
<span>Services</span>
<div data-dojo-type="dijit.DropDownMenu" id="submenu2">
<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){}">Consulting</div>
</div>
</div>
<div data-dojo-type="dijit.MenuItem" class="item">Why us?</div>
<div data-dojo-type="dijit.MenuItem" class="item">FAQs</div>
<div data-dojo-type="dijit.MenuItem" class="item">Contact us</div>
答案 0 :(得分:0)
从<script>
我已经改变了。并添加功能以更改样式,这将在加载完成时执行。
<script>
require(["dojo/dom", "dojo/dom-style", "dijit/DropDownMenu", "dijit/MenuSeparator", "dijit/PopupMenuItem", "dijit/MenuItem", "dijit/TooltipDialog", "dojo/domReady!"],
function (dom, domStyle) {
var controlDisplay = dom.byId("controlDisplay");
domStyle.set(controlDisplay, "display", "block");
});
</script>
在正文中,我添加了隐藏所有项目的<div>
。
<div id="controlDisplay" style="display:none;">
<div data-dojo-type="dijit.DropDownMenu" id="navMenu">
<div data-dojo-type="dijit.MenuItem" class="item dijitMenuItemSelected">Home</div>
<div data-dojo-type="dijit.PopupMenuItem" class="item">
<span>Services</span>
<div data-dojo-type="dijit.DropDownMenu" id="submenu2">
<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){}">Consulting</div>
</div>
</div>
<div data-dojo-type="dijit.MenuItem" class="item">Why us?</div>
<div data-dojo-type="dijit.MenuItem" class="item">FAQs</div>
<div data-dojo-type="dijit.MenuItem" class="item">Contact us</div>
</div>
</div>
首先,它会在加载完成后才会出现。 JS将改变<div>
的样式以显示所有。
答案 1 :(得分:0)
在我使用display:none style。
添加以下脚本后,它工作正常require(["dojo/ready", "dojo/parser", "dijit/registry", "dijit/Dialog"], function(ready, parser, registry){
ready(function(){
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
fx.fadeOut({duration: 250, node: dom.byId("loader"), onEnd: function() { loader.style.display = "none"; } }).play(250);
});
}); });