Question

您好我在Dojo（Dojo Newbie）中创建了一些自定义导航，并且正在努力争取最后一块拼图。基本上，当将鼠标悬停在“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。我的代码片段如下：

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

我尝试了各种方法，但无法实现我正在寻找的结果任何帮助将不胜感激。

非常感谢

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

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

1 个答案: