常に表示される開始レベルの配列を使用して、ナビゲーション バーに 3 レベルのナビゲーションを作成し、親要素のホバリングに対応して 2 つのレベルを表示または非表示にしたいと考えています。
マウスを要素の外に移動するときに子レベルの要素を非表示にする必要があるため、少し混乱しますが、同時に子要素に移動する場合は、すでに非表示になっている要素を表示する必要があります。これは奇妙ですが、簡単な解決策を試してみたところ、第 1 レベルでは問題なく動作しました。私の解決策は次のようなものでした：
$(parent).mouseover (function() {
$(children).show();
});
$(parent).mouseout (function() {
$(children).hide();
});
$(child).mouseover (function() {
$(this).show();
});
$(child).mouseout (function() {
$(this).hide();
});
第 1 レベルでは正常に機能しますが、第 2 レベルでは機能しません。たとえば、ナビゲーション階層は次のようになります。
- 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 または .js ファイルではなく、.css ファイルで発生します。ラッパーに 1px の境界線を設定し、マウスの出入りを分離します。少し複雑ですが、Javascript/jQuery で重要なことの 1 つは、マウスが要素から別の要素に移動するときです。厳密に下 (1 ピクセルも離れていない) では、movein および moveout イベントがすべて実行されます。