0

我有 div 结构

<div id="navigate">
   <div class="menu">
       <div class="group">Mail</div>
       <div class="item">Folders</div>
       <div class="item">Messages</div>
   </div>
   <div class="menu">
       <div class="group">Contacts</div>
       <div class="item">Friends</div>
       <div class="item">Work</div>
   </div>
   <div class="menu">
       <div class="group">Setting</div>
       <div class="item">General</div>
       <div class="item">Account</div>
   </div>
</div>

现在所有项目都被隐藏了，只显示了“组”类的 div。我想做的是，如果我将鼠标悬停在特定的菜单 div 上，则只会出现该菜单的项目。

现在我有这个代码：

function initialise()
{
    hideAllItems();

    setMouseOvers();
}

function hideAllItems()
{
    var nav = document.getElementById("navigate");
    var items = nav.getElementsByClassName("item");

    for(var i = 0; i < items.length; i++)
    {
        items[i].style.visibility = "hidden";
        items[i].style.display = "none";
    }
}

function setMouseOvers()
{
    var nav = document.getElementById("navigate");
    var menuArr = nav.getElementsByClassName("menu");

    for(var x = 0; x < menuArr.length; x++)
    {
        var itemArrs = menuArr[x].getElementsByClassName("item");

        /*var show = function(){ show(itemArrs); };
        var hide = function(){ hide(itemArrs); };*/
        menuArr[x].onmouseover=function(){ show(itemArrs); };
        menuArr[x].onmouseout=function(){ hide(itemArrs); };
    }
}

function show(itemArr)
{
    for(var i = 0; i < itemArr.length; i++)
    {
        alert(itemArr[i].innerHTML);
        itemArr[i].style.visibility = "visible";
        itemArr[i].style.display = "block";
    }
}

function hide(itemArr)
{
    for(var i = 0; i < itemArr.length; i++)
    {
        itemArr[i].style.visibility = "hidden";
        itemArr[i].style.display = "none";
    }
}

这很有效，认为无论我将鼠标悬停在哪个菜单上，它都只显示常规和帐户。我隐约明白出了什么问题，但无论如何我都看不到要修复它。有任何想法吗？如果我能提供帮助，我不想更改 html 结构（例如添加 id 或创建特定类）！

4

3 回答 3

3

我知道您很可能正在寻找 javascript 解决方案，但您可以使用简单的 CSS 解决方案：

.group:hover ~ .item {
    display: block;
}

工作小提琴

但请注意，旧 IE (< 8) 浏览器不支持它SUPPORT。如果您想使用它，这取决于您的目标群体。

于 2014-03-13T12:49:54.420 回答
2

为什么不简单地使用 CSS：DEMO

.menu .item{
  display:none;
}

.menu:hover .item{
  display:block;
}
于 2014-03-13T13:03:52.227 回答
0

当您要求仅使用 JavaScript的解决方案（HTML/css 中没有变化）时，我建议如下：
问题是在匿名函数中使用“itemArrs”，因为只有最新编写的“itemArrs”用于所有这些，请使用“这个”代替。

例如：

...
groups[x].onmouseover=function(){ show(this); };
...

和

function show(item) {
  var items = item.parentNode.getElementsByClassName("item");
  ...

可以在此处找到 完整的仅 JS 解决方案：http: //jsfiddle.net/Wn4d4/3/

于 2014-03-13T13:04:43.777 回答