                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /JS實現京東無延遲菜單效果

添加js腳本后，二級菜單只顯示一行空白？

$(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
???}
??})
})

02:21

weibo_阿飛去捉小蝴蝶_0

2017-05-23

源自：JS實現京東無延遲菜單效果 3-1

關注問題我要回答

1770

操作

收起

3 回答

zhang789018
2017-05-30

是內部元素<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.xianlaiwan.cn/"?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>