在 Dojo 中显示 Div 并隐藏其他人

Posted

技术标签:

【中文标题】在 Dojo 中显示 Div 并隐藏其他人【英文标题】:Reveal Div and Hide others in Dojo 【发布时间】:2011-05-24 19:10:43 【问题描述】:

我正在 Dojo 中创建一些自定义导航,并且在拼图的最后一块苦苦挣扎。基本上,当悬停在具有“navSectionTitle”类的链接上时,将显示一个包含更多链接的 div。但是,当这种情况发生时,我想隐藏当前显示的所有其他 div。我在下面的标记可能会显示我想要实现的目标:

<div class="navElement"> 
                    <a href="" class="navSectionTitle">Home Appliances  &#43;</a>
                    <div class="subMenuHolder">
                        <ul>
                            <li><a href="#">Washing Machines</a>,</li>
                            <li><a href="#">Vacuum Cleaners</a>,</li>
                            <li><a href="#">Microwaves</a>,</li>
                            <li><a href="#">Ovens</a>,</li>
                            <li><a href="#">Coffee Makers</a>,</li>
                            <li><a href="#">Toasters</a>,</li>
                            <li><a href="">More</a> &#43;</li>

                        </ul>
                    </div>  
                </div>

                <div class="navElement"> 
                    <a href="" class="navSectionTitle">Furniture  &#43;</a>
                    <div class="subMenuHolder last">
                        <ul>
                            <li><a href="#">Bedroom Furniture</a>,</li>
                            <li><a href="#">Kitchen Furniture</a>,</li>
                            <li><a href="#">Living Room Furniture</a>,</li>
                            <li><a href="#">Outdoor Furniture</a>,</li>
                            <li><a href="#">Office Furniture</a>,</li>
                            <li><a href="#">Book Shelves</a>,</li>
                            <li><a href="">More</a> &#43;</li>

                        </ul>
                </div>  
                </div>

因此,当链接悬停在其壁橱上时 subMenuHolder div 将被显示,但是我想隐藏任何其他打开的 subMenuHolder div。我的代码的 sn-p 如下:

        dojo.query(".navSectionTitle").forEach(function(node, index, nodelist)     
         dojo.connect(node , "onmouseover", function(evt)               
                 dojo.query(node).next('.subMenuHolder')[0].style.display = 'block';
              );
);

我尝试了各种方法,但都无法达到我正在寻找任何帮助的结果,将不胜感激。

【问题讨论】:

【参考方案1】:

要在查询后使用next()函数,你需要有“dojo.NodeList-traverse”:

dojo.require("dojo.NodeList-traverse");

这里有一个例子来说明如何做到这一点。

dojo.query(".subMenuHolder").forEach(function(n) 
    var l = dojo.query(n);
    l.parent().at(0)
        .onmouseenter(function()
            dojo.style(l[0], "display", "block");
        )
        .onmouseleave(function()
            dojo.style(l[0], "display", "none");
        );
);

我假设你的 .subMenuHolders 默认隐藏在这里。

【讨论】:

谢谢,但认为您误解了我已经需要我需要的模块的问题,如前所述,这是代码的 sn-p。欢呼 啊,对不起。更新了我的答案,希望对你有帮助。 感谢 Frode,是的,它们默认是隐藏的,谢谢,我会试一试,让你知道我的进展情况。

以上是关于在 Dojo 中显示 Div 并隐藏其他人的主要内容,如果未能解决你的问题,请参考以下文章

显示/隐藏以作为手风琴工作

使用 jQuery 在特定时间间隔显示和隐藏 div

仅显示下一个 div 并隐藏具有相同类的其他 div

根据条件在dojo网格中显示/隐藏列

如何启用在页面加载时选中的第一个复选框并仅显示数据目标 div 并隐藏其他复选框,并且一次仅选中一个复选框

在隐藏其他 div 时切换 div