0
我想谢谢大家的回答，我很高兴地说我的问题解决了。我认为所有的答案都是有效的，因为我的工作也没有本质的区别。问题不在.html或.js文件中，而是在.css文件中。我在包装上设置了一个1px的边框，并将鼠标移出和插入。这有点复杂，但有一点非常重要，即在Javascript/jQuery中，当鼠标从元素移动到另一个元素时，只要它们是严格地说（在远处不超过1px），movein和moveout事件都将被执行。玩的开心！如何使用jQuery/JavaScript制作隐藏和显示导航？ （已解决）
============================================== =====================
我想在我的导航栏上进行三级导航，其中有一个始终显示起始级别的数组，以及两个级别显示或隐藏对应于其父元素的悬停。
我有点困惑，因为在将鼠标移出元素时必须隐藏子级别元素，但如果您同时移动到子元素，则必须显示已经存在的元素隐。这很奇怪，但我已经尝试了一个简单的解决方案，它在第一级工作正常。我的解决方案是这样的：
$(parent).mouseover (function() {
$(children).show();
});
$(parent).mouseout (function() {
$(children).hide();
});
$(child).mouseover (function() {
$(this).show();
});
$(child).mouseout (function() {
$(this).hide();
});
它适用于第一级别，但不适用于第二级别。例如，导航层次结构是这样的：
- Fruit
- Apple
- Fuji
- Huangjin
- Pine
...
- Juice
...
当我移动到水果，所有的水果已被证明，当我移动到苹果，所有水果仍显示和各种苹果是显示，但是当我移动到像富士这样的特定种类时，所有水果和种类都隐藏起来。
我不明白为什么。
顺便说一下，如何实现这样的隐藏和显示导航栏？看起来，我的“解决方案”隐藏并显示了孩子的元素，当我移动到一个孩子的项目，但它很奇怪。有没有更好的解决方案？
我认为它可能会触及一些关于浏览器事件的深层次问题。
的HTML：
<%@ page language="java" import="java.util.*, cn.xxxx.customer.center.util.*" pageEncoding="utf-8"%>
<%
//不允许浏览器端或缓存服务器缓存当前页面信息。
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
response.addHeader("Cache-Control", "no-cache");//浏览器和缓存服务器都不应该缓存页面信息
response.addHeader("Cache-Control", "no-store");//请求和响应的信息都不应该被存储在对方的磁盘系统中；
response.addHeader("Cache-Control", "must-revalidate");//于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时；
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String docName = request.getParameter("name");
String docHtmlPath = Constants.docHtmlBase + docName + ".html";
String docStylePath = Constants.docHtmlBase + docName + ".style";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%= basePath %>">
<title><%= docName %></title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1, keyword2, keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="style.css">
<jsp:include page="<%= docStylePath %>" flush="true" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<!-- <script type="text/javascript" src="jquery-1.10.2.js"></script> -->
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<!-- absolute positioned category&item divs -->
<div id="cate-div1" class="cate-wrapper" nav_div_id="nav-div1">
<div id="cate-item-div1-1" class="cate-item" doc_div_id="doc-div1-1">A</div>
<div id="cate-item-div1-2" class="cate-item" doc_div_id="doc-div1-2">B</div>
<div id="cate-item-div1-3" class="cate-item">C</div>
<div id="cate-item-div1-4" class="cate-item">D</div>
<div id="cate-item-div1-5" class="cate-item">E</div>
<div id="cate-item-div1-6" class="cate-item">F</div>
</div>
<div id="cate-div2" class="cate-wrapper" nav_div_id="nav-div2">
<div id="cate-item-div2-1" class="cate-item">飞机</div>
<div id="cate-item-div2-2" class="cate-item">导弹</div>
<div id="cate-item-div2-3" class="cate-item">舰船</div>
</div>
<div id="doc-div1-1" class="doc-wrapper" cat_item_div_id="cate-item-div1-1">
</div>
<div id="doc-div1-2" class="doc-wrapper" cat_item_div_id="cate-item-div1-2">
</div>
<!-- header -->
<div id="upper-wrapper">
<div id="header-wrapper">
<img id="logo-img" src="files/logo.png" />
<div id="header-text">资料库 </div>
<div id="nav-wrapper">
<img class="nav-bar" src="files/nav-bar.png" />
<a id="nav-div1" class="dropdown-nav-item" cate_div_id="cate-div1">项目</a>
<img class="nav-bar" src="files/nav-bar.png" />
<a id="nav-div2" class="dropdown-nav-item" cate_div_id="cate-div2">武器</a>
<img class="nav-bar" src="files/nav-bar.png" />
</div>
</div>
</div>
<!-- main content -->
<div id="main-wrapper">
<div id="content-wrapper">
<jsp:include page="<%= docHtmlPath %>" flush="true" />
</div>
</div>
</body>
</html>
的JS：
jQuery.extend ({
initPage: function() {
$("#header-wrapper").width($("#content-wrapper").innerWidth());
},
calcCateDivHeight: function (divs) {
var h = 0;
for (var i = 0; i < divs.length; i ++) {
$(divs[i]).attr("accumHeight", h);
$(divs[i]).attr("seq", i);
h += divs[i].height;
}
}
});
$(document).ready (function() {
$.initPage();
$.calcCateDivHeight($("div#cate-div1 .cate-item"));
$.calcCateDivHeight($("div#cate-div2 .cate-item"));
$(window).resize (function() {
$.initPage();
});
$(".dropdown-nav-item").mouseover (function() {
// update the nav item background
$(this).css("background-color", "#2a2a2a");
// display the corresponding category div
var pos = $(this).offset();
pos.top += $(this).outerHeight();
var cate_div = $("#" + $(this).attr("cate_div_id"));
cate_div.css("left", pos.left);
cate_div.css("top", pos.top);
cate_div.attr("leftPos", pos.left);
cate_div.attr("topPos", pos.top);
cate_div.show("slow");
});
$(".dropdown-nav-item").mouseout (function() {
// update the nav item background
$(this).css("background-color", "inherit");
// hide the corresponding category div
var cate_div = $("#" + $(this).attr("cate_div_id"));
cate_div.hide();
});
$(".cate-wrapper").mouseover (function() {
$(this).show();
// update the nav item background
var nav_div = $("#" + $(this).attr("nav_div_id"));
$(nav_div).css("background-color", "#2a2a2a");
});
$(".cate-wrapper").mouseout (function() {
$(this).hide();
// update the nav item background
var nav_div = $("#" + $(this).attr("nav_div_id"));
$(nav_div).css("background-color", "inherit");
});
$(".cate-item").mouseover (function() {
// update the cate item background
$(this).css("background-color", "#080808");
var left = Number($(this).parent().attr("leftPos"));
left += $(this).parent().outerWidth();
var top = Number($(this).parent().attr("topPos"));
//top += $(this)[0].accumHeight;
top += 37 * $(this).attr("seq");
var doc_div = $("#" + $(this).attr("doc_div_id"));
doc_div.css("left", left);
doc_div.css("top", top);
doc_div.show();
});
$(".cate-item").mouseout (function() {
// update the cate item background
$(this).css("background-color", "inherit");
// hide the corresponding doc div
var doc_div = $("#" + $(this).attr("doc_div_id"));
doc_div.hide();
});
$(".doc-wrapper").mouseover (function() {
$(this).show();
// update the nav item background
var cat_item_div = $("#" + $(this).attr("cat_item_div_id"));
$(cat_item_div).css("background-color", "#080808");
// display the corresponding cat div
$(cat_item_div).parent().show();
// update the nav item background
var nav_div = $("#" + $(cat_item_div).parent().attr("nav_div_id"));
$(nav_div).css("background-color", "#2a2a2a");
});
$(".doc-wrapper").mouseout (function() {
$(this).hide();
// update the nav item background
var cat_item_div = $("#" + $(this).attr("cat_item_div_id"));
$(cat_item_div).css("background-color", "inherit");
// hide the corresponding cat div
$(cat_item_div).parent().hide();
// update the nav item background
var nav_div = $("#" + $(cat_item_div).parent().attr("nav_div_id"));
$(nav_div).css("background-color", "inherit");
});
});
你可以用它的html源代码来替换列表吗？这是找出可能的错误的更好方法。 – reporter
代码已附上 – waytofall