简体   繁体   English

在 Dojo 中显示 Div 并隐藏其他

[英]Reveal Div and Hide others in Dojo

I am creating some custom navigation in Dojo and am struggling with the final piece of the jigsaw a bit.我正在 Dojo 中创建一些自定义导航,并且在拼图的最后一块苦苦挣扎。 Basically when hovering over a link with the class "navSectionTitle" a div will be revealed containing more links.基本上,当将鼠标悬停在带有 class“navSectionTitle”的链接上时,将显示包含更多链接的 div。 However when this happens I would like to hide all other div's that are currently revealed.但是,当这种情况发生时,我想隐藏当前显示的所有其他 div。 My mark up below might show what I am trying to achieve:我在下面的标记可能会显示我想要实现的目标:

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

So when on link is hover on its closet subMenuHolder div will be revealed, however I would then like to hide any other subMenuHolder div's that are open.因此,当链接是 hover 时,其壁橱 subMenuHolder div 将被显示,但是我想隐藏任何其他打开的 subMenuHolder div。 A snippet of my code is below:我的代码片段如下:

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

I have tried various methods but do not be able to achieve the results I am looking for any help would be greatly appreciated.我尝试了各种方法,但无法达到我正在寻找的任何帮助的结果,将不胜感激。

To use the next() function after a query, you need to have required "dojo.NodeList-traverse":要在查询后使用next() function,您需要需要“dojo.NodeList-traverse”:

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

Here's an example of how you can do it.这是一个如何做到这一点的例子。

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");
        });
});

I'm assuming you have your.subMenuHolders hidden by default here.我假设您在此处默认隐藏 your.subMenuHolders。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM