Question

如果有人可以帮助我指出正确的方向，那将是非常棒的，因为我一直在寻找解决这个问题数小时的问题。

我有一个包含3个菜单项的菜单。如果将鼠标悬停在最后两个菜单项上，则会显示包含来自不同列表的项目的div。该部分工作正常，但如果我从另一个列表中滚动其他菜单项，它们会再次消失。

这是我的JavaScript：

<script type="text/javascript">

function showGalleryNav(){

document.getElementById('headerNavGallery').style.display = "";

}

function showInfoNav(){

document.getElementById('headerNavInfo').style.display = "";

}


function hideGalleryNav(){

document.getElementById('headerNavGallery').style.display = "none";

}

function hideInfoNav(){

document.getElementById('headerNavInfo').style.display = "none";

}

</script>

和HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a></li>
<li><a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()">Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="#">William Ruppel</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

我尝试了不同的属性，但没有一个工作，我也试过用

切换到jQuery

$('#headerNavGallery").css("display", "");

也没用，

任何想法都会被大大提升。

Answer 1

实际上你想要完成的是所有css只能用，但没有那个标记结构。首先，您需要嵌套列表。

<ul class="menu">
<li><a href="#">item 1</a></li>
<li>
  <a href="#">item 2 with sub</a>
  <ul>
    <li><a href="#">sub menu item 1</a></li>
    <li><a href="#">sub menu item 2</a></li>
    ... so on ..
  </ul>
</li>
</ul>

一些css

.menu li {
    position: relative;
}
.menu li ul {
    position: absolute;
    top: 30px; /* the height of the root level item */
    display: none;
}
.menu li li {
    position: static; /* or you could float these for horizontal menu */

}
.menu li:hover ul {
    display: block;
}

这几乎是基础知识。但是我强烈建议你去学习超级鱼菜单，因为它是jquery drop drop菜单，但是js off会很好地降级，所以你可以研究它的css。 http://users.tpg.com.au/j_birch/plugins/superfish/

Answer 2

检查typeo，nvm ...... 设置display属性应该始终具有值“none”或“block”，空（“”）是一个错误的重置...试试这个：

<script>
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

</script>

HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

AND CSS

.headerNav{
     border:thin solid black;
     float:left;
}
.headerNavGallery{
 float:left;
 border:thin solid black;
  margin-left:-1px;
}

Answer 3

1）<a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a>

您无需指定javascript:。这是多余的。

2）它的工作方式与您编程的方式完全一致。鼠标移出时，它会消失。

3）您有“headerNavInfo”代码，但没有匹配的HTML。

菜单项悬停JavaScript

3 个答案: