DOJO-隐藏DropDownMenu的菜单项

DOJO - Hide Menu items for DropDownMenu

本文关键字：菜单项 DropDownMenu 隐藏 DOJO-      更新时间：2023-09-26

第一次加载时菜单项变得零散。正在寻找一种隐藏组件的方法，直到它完全加载并适合页面。

<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>

根据您的<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>的样式以显示所有内容

请参阅JSFiddle

我添加了以下带有display:none样式的脚本后，它就工作了。

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);
    });
}); });
相关文章：