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