javascript - 如何使用 jQuery/JavaScript 进行隐藏和显示导航？

Question

我想在我的导航栏上进行三级导航，其中包含一组始终显示起始级别，并且两个级别显示或隐藏对应于其父元素的悬停。

我有点困惑，因为当您将鼠标移出元素时，您必须隐藏子级元素，但如果您同时移动到子元素，则必须显示已经隐藏的元素。这很奇怪，但我尝试了一个简单的解决方案，它适用于第一级。我的解决方案是这样的：

$(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 或 .js 文件中，而是在 .css 文件中。我在包装器上设置了一个 1px 边框，并将鼠标移出和移入分开。这有点复杂，但有一点很重要，在 Javascript/jQuery 中，当鼠标从一个元素移动到另一个元素时，只要它们是严格在下方（甚至远不到 1px），movein 和 moveout 事件都将被执行。

score 1 · Accepted Answer

小提琴：http: //jsfiddle.net/neuroflux/ssSnN/1/

CSS：

.child {
    display: none;
}

HTML：

<div id="fruits">
    <div class="roll" id="apple">APPLE
        <div class="child">Fuji</div>
        <div class="child">Huangjin</div>
        <div class="child">Stuff</div>
    </div>

    <div class="roll" id="pine">PINE
        <div class="child">Stuff</div>
        <div class="child">Stuff</div>
        <div class="child">Stuff</div>
    </div>

Javascript：

$('.roll').on('mouseover', function() {
    $('.child').hide();
    $(this).children('.child').show();
}).on('mouseout', function() {
    $('.child').hide();
})

score 0 · Accepted Answer

你可以这样做：

html:

<div id="fruits">
    <div class="roll" id="apple">APPLE
        <div class="child">Fuji
             <div class="child2">abc</div>
             <div class="child2">def</div>
        </div>
        <div class="child">Huangjin</div>
        <div class="child">Stuff
             <div class="child2">abc</div>
             <div class="child2">def</div>
        </div>
    </div>

    <div class="roll" id="pine">PINE
        <div class="child">Stuff</div>
        <div class="child">Stuff</div>
        <div class="child">Stuff</div>
    </div>

    <div class="roll" id="juice">JUICE
        <div class="child">Stuff2</div>
        <div class="child">Stuff2</div>
        <div class="child">Stuff2</div>
    </div>
</div>

CSS：

.child {
    display: none;
}

* { padding: 6px; }

Javascript：

$(".roll").mouseover(function() {
    $('.child').hide();
    $(this).children('.child').show();
}).on('mouseout', function() {
    $('.child').hide();
})

$(".child").mouseover(function() {
    $('.child').hide();
    $(this).children('.child2').show();
}).on('mouseout', function() {
    $('.child2').hide();
})

试试看..

score 0 · Accepted Answer

你可以用这个

$(child).mouseover (function() {
    $(this).find("li").show();
});

如果是 ul li。

或者

$(child).mouseover (function() {
    $(this).children("li").show();
});

javascript - 如何使用 jQuery/JavaScript 进行隐藏和显示导航？

解决了

3 回答 3

Related

Reference