$(document).ready(function() {
var sub = $("#sub")
//变量sub =子菜单
var activeRow
//变量activeRoe为激活的一级菜单中的行
var activeMenu
//变量activeMenu与之对应的二级菜单
$("#test")
//一级菜单
.on('mouseenter',function(e){
sub.removeClass('none')
})
// 鼠标移至时去除sub的none类属性-可见
.on('mouseleave',function(e){
sub.addClass('none')
// 鼠标移出时添加sub的none类属性-不可见
if (activeRow) {
//如果存在一级菜单激活
activeRow.removeClass('active')
//去除样式一级菜单的active样式
activeRow = null
}
if (activeMenu) {
//如果存在二级菜单激活
activeMenu.addClass('none')
//给二级菜单添加none样式
activeMenu = null
}
})
.on('mouseenter','li',function(e) {
//鼠标移动到li上
if(!activeRow) {
//如果没有激活的列表项
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
})
})是内部元素<dt>test</dt>没有显示，
if (!activityRow) {
console.log(e.target);
activityRow = $(e.target).addClass('active');
console.log(activityRow.data('id'));
activityMenu = $('#' + activityRow.data('id'));
console.log(activityMenu);
activityMenu.removeClass('none');
return
}
看看target是什么元素？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!--规定文档的字符编码。-->
<title>让知识更有价值</title>
<meta name="renderer" content="webkit"><!--默认webkit内核-->
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp"><!--源于百度禁止转码-->
<meta name="Keywords" content="天一块">
<meta name="Description"
content="天一块`1是付费只是">
<style type="text/css">
/*清除掉基本样式*/
* {
margin: 0;
padding: 0
}
#header {
height: 30px;
width: 100%;
}
ul {
padding: 15px 0;
margin: 0;
list-style: none; /* 去除无序列表原点*/
background: beige;
width: 100px;
color: salmon;
}
li {
display: block;
cursor: pointer;
}
li.active {
background-color: dimgray;
}
a {
text-decoration: none; /*去掉下划线*/
display: block
}
a:hover {
color: aliceblue;
background: royalblue;
}
.aIndex {
background-color: royalblue;
}
.wrap {
position: relative;
width: 200px;
left: 50px;
top: 50px;
}
#sub {
width: 600px;
position: absolute;
border: 1px solid #f34;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
left: 200px;
top: 0;
box-sizing: border-box;
margin: 0;
padding: 10px;
}
.sub_content {
font-size: 20px;
}
.none {
display: none;
}
.sub_content dl {
overflow: hidden;
}
.sub_content dt {
float: left;
width: 70px;
clear: left;
font-weight: bold;
position: relative;
}
</style>
</head>
<body id="index">
<div id="header">
<a href="http://www.imooc.com/" target="_self" class="hide-text" title="首页"><img src=""></a>
</div>
<div id="main">
<div class="wrap" id="test">
<ul>
<li data-id="a"><a class="aIndex" data-id="a" href="#">java</a></li>
<li><a href="#">c</a></li>
<li><a href="#">python</a></li>
<li><a href="#">white cold drink</a></li>
</ul>
<div id="sub" class="none">
<div id="a" class="sub_content none">
<dl>
<dt>test</dt>
</dl>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./t1bao/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var sub = $("#sub");
var activityRow;
var activityMenu;
$("#test").on('mouseenter', function (e) {
sub.removeClass('none');
}).on('mouseleave', function (e) {
sub.addClass('none');
if (activityRow) {
activityRow.removeClass('active');
activityRow = null;
}
if (activityMenu) {
activityMenu.removeClass('none');
activityMenu = null;
}
}).on('mouseenter', 'li', function (e) {
if (!activityRow) {
console.log(e.target);
activityRow = $(e.target).addClass('active');
console.log(activityRow.data('id'));
activityMenu = $('#' + activityRow.data('id'));
console.log(activityMenu);
activityMenu.removeClass('none');
return
}
activityRow.removeClass('active');
activityMenu.removeClass('none');
activityRow = $(e.target);
activityRow.addClass('active');
activityMenu =$('#' + activityRow.data('id'));
activityMenu.removeClass('none');
})
})
</script>
</body>
</html><div id="sub" class="none">
<div id="a" class="sub_context none">
把二级菜单的data-id 改为id
activeRow.removeClass('active')
activeMenu.addClass('none')
activeRow=$(e.target)
activeRow.addClass('active')
activeMenu=$('#'+activeRow.data('id'))
activeMenu.removeClass('none')
})
})