Question

Hi pretty new to Dojo basicly I am trying to attach a event to ‘every’ class then on mouseover I would like to reveal the closet div (changing display to block) with a class name. However after numerous attempts I am unable to do so.

Here is the html :

<div class="navElement"> 
                    <a href="" class="navSectionTitle">Sound &#38; Vision &#43;</a>
                    <div class="subMenuHolder">
                        <ul>
                            <li><a href="#">Televisions</a>,</li>
                            <li><a href="#">LCD TVs</a>,</li>
                            <li><a href="#">Plasma TVs</a>,</li>
                            <li><a href="#">3D TVs</a>,</li>
                            <li><a href="#">MP3 Players</a>,</li>
                            <li><a href="#">Hi Fi</a>,</li>
                            <li><a href="#">MP3 Docks</a>,</li>
                            <li><a href="">More</a> &#43;</li>

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

                <div class="navElement"> 
                    <a href="" class="navSectionTitle">Computers &#38; Software  &#43;</a>
                    <div class="subMenuHolder">
                        <ul>
                            <li><a href="#">Laptops</a>,</li>
                            <li><a href="#">Desktops Computers</a>,</li>
                            <li><a href="#">Software</a>,</li>
                            <li><a href="#">Printers</a>,</li>
                            <li><a href="#">External Hard Drives</a>,</li>
                            <li><a href="#">Internal Hard drives</a>,</li>
                            <li><a href="">More</a> &#43;</li>

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

The dojo I am attempting to use is below :

dojo.require("dojo.NodeList-traverse");    
dojo.query(".navSectionTitle").forEach(function(node, index, nodelist){
            dojo.connect(node , "onmouseover", function(evt){
                var here = dojo.query(node).closest(".subMenuHolder");
                here.style.display = 'block';
                console.log(here);
            });
        });

Not sure if this is best practice but would appreciate any help, many thanks.

Answer 1

Closest will return the parent of the node in query.
so go for next method as shown below.
Make sure to wrap all the event attaching code inside the dojo.addOnLoad block

    dojo.query(".navSectionTitle").forEach(function(node, index, nodelist){     
        dojo.connect(node , "onmouseover", function(evt){               
          //this is the menu you want to show       
          console.log(dojo.query(node).next('.subMenuHolder')[0])
        });
    });

Hope it helps