Reveal Div and Hide others in Dojo

Question

I am creating some custom navigation in Dojo and am struggling with the final piece of the jigsaw a bit. Basically when hovering over a link with the class "navSectionTitle" a div will be revealed containing more links. However when this happens I would like to hide all other div's that are currently revealed. 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. 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.

Answer 1

To use the next() function after a query, you need to have required "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.