[英]Reveal Div and Hide others in Dojo
我正在 Dojo 中创建一些自定义导航,并且在拼图的最后一块苦苦挣扎。 基本上,当将鼠标悬停在带有 class“navSectionTitle”的链接上时,将显示包含更多链接的 div。 但是,当这种情况发生时,我想隐藏当前显示的所有其他 div。 我在下面的标记可能会显示我想要实现的目标:
<div class="navElement">
<a href="" class="navSectionTitle">Home Appliances +</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> +</li>
</ul>
</div>
</div>
<div class="navElement">
<a href="" class="navSectionTitle">Furniture +</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> +</li>
</ul>
</div>
</div>
因此,当链接是 hover 时,其壁橱 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';
});
});
我尝试了各种方法,但无法达到我正在寻找的任何帮助的结果,将不胜感激。
要在查询后使用next()
function,您需要需要“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");
});
});
我假设您在此处默认隐藏 your.subMenuHolders。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.