Depth-level-1(Menu-item-1.x)定位为relative
,Depth-level-2,3 ..菜单定位为absolute
。
如果depth-level-2-menu
列表项超过depth-level-1
,则depth-level-1
应根据depth-level-2
扩展其高度。
$(document).ready(function() {
/*Depth-0
===========*/
$('.afs-menu-item').click(function() {
$('.afs-col ul li').removeClass('active'); //Closing Depth-1
if ($(this).closest("li.afs-menu-item").children(".afs-dropdown").length) {
$('.afs-dropdown').slideToggle('fast');
} else {
var url = $(this).closest("li.menu-item").attr('href');
window.open(url, "_self");
}
return false;
});
/*Depth-1
===========*/
$('.afs-col ul li').click(function(event) {
event.stopPropagation();
$('.afs-sub-col ul li').removeClass('active'); //Closing Depth-2
var depth1 = $(this);
depth1.siblings().removeClass('active');
if (depth1.hasClass('active')) {
depth1.removeClass('active');
} else {
depth1.addClass('active');
}
});
/* Depth-2
==============*/
$('.afs-sub-col ul li').click(function(event) {
event.preventDefault();
$(this).addClass('active');
var depth2 = $(this);
depth2.siblings().removeClass('active');
if (depth2.hasClass('active')) {
depth2.removeClass('active');
} else {
depth2.addClass('active');
}
});
/*Depth-3
=============*/
$('.afs-sub-sub-col > ul > li').click(function(event) {
var depth3 = $(this);
depth3.siblings().removeClass('active');
if (depth3.hasClass('active')) {
depth3.removeClass('active');
} else {
depth3.addClass('active');
}
});
}); // Jquery Document Close
body {
font-family: 'Mada', sans-serif;
font-weight: 600;
line-height: 1;
}
ol,
ul {
list-style: none;
}
/*Container
===============*/
.container {
position: relative;
width: 100%;
margin: 0 auto;
}
.inner {
position: relative;
width: 1500px;
margin: 0 auto;
}
.afs-menu {
text-decoration: none;
text-align: center;
}
.afs-menu li a {
text-decoration: none;
font-size: 23px;
color: #00A0F0;
transition: all 0.3s linear;
}
.afs-dropdown li a {
text-decoration: none;
font-size: 18px;
color: #00A0F0;
transition: all 0.3s linear;
}
li a:hover {
color: #000;
}
.afs-menu>li {
display: inline-block;
padding: 15px 20px;
}
.afs-dropdown {
position: absolute;
top: 80px;
left: 0;
width: 100%;
text-align: left;
display: none;
background-color: #888;
}
.afs-dropdown>.afs-col {
display: block;
}
.afs-col {
position: relative;
top: 0;
display: block;
width: 33%;
background-color: transparent;
z-index: 99;
}
.afs-col>ul>li {
padding: 20px 0px;
border-bottom: 1px dotted #ccc;
}
.afs-sub-col>ul>li {
padding: 20px 0px;
border-bottom: 1px dotted #ccc;
}
.afs-sub-sub-col>ul>li {
padding: 20px 0px;
border-bottom: 1px dotted #ccc;
}
.afs-sub-sub-sub-col>ul>li {
padding: 20px 0px;
border-bottom: 1px dotted #ccc;
}
.afs-sub-col {
position: absolute;
left: 510px;
top: 0;
/*display: none;*/
opacity: 0;
width: 100%;
transition: width 300ms, opacity 300ms;
}
.afs-sub-sub-col {
position: absolute;
left: 510px;
top: 0;
opacity: 0;
transition: width 300ms, opacity 300ms;
width: 100%;
}
.afs-sub-sub-sub-col {
position: absolute;
left: 510px;
top: 0;
display: none;
width: 100%;
}
.active .afs-col {
display: block;
}
.afs-col .active .afs-sub-col {
/*display: block;*/
opacity: 1;
}
.afs-col .afs-sub-col li.active .afs-sub-sub-col {
opacity: 1;
}
.afs-col .afs-sub-col .afs-sub-sub-col .active .afs-sub-sub-sub-col {
display: block;
}
.afs-children-indenter {
color: #00A0F0;
font-size: 20px;
float: right;
padding-left: 10px;
padding-top: 1px;
}
/*Back Button*/
.afs-back-button {
display: none;
text-align: center;
padding: 10px 20px;
width: 100px;
background-color: #00A0F0;
transition: opacity 300ms;
}
.afs-back-button a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.open {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inner">
<ul class="afs-menu">
<li class="afs-menu-item"><a href="#">Menu-item-1</a><span class="afs-children-indenter"><i class="fa fa fa-angle-down"></i></span>
<div class="afs-dropdown">
<div class="afs-col">
<ul>
<li><a href="#">Menu-item: 1.1</a><span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
<div class="afs-sub-col">
<ul>
<li><a href="#">Menuitem1.1.1</a></li>
<li><a href="#">Menuitem1.1.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
<li><a href="#">Menuitem1.1.3</a></li>
<li><a href="#">Menuitem1.1.4</a></li>
<li><a href="#">Menuitem1.1.5</a></li>
<li><a href="#">Menuitem1.1.6</a></li>
<li><a href="#">Menuitem1.1.7</a></li>
<div class="afs-sub-sub-col">
<ul>
<li><a href="#">Menuitem1.1.2.1</a></li>
<li><a href="#">Menuitem1.1.2.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
<div class="afs-sub-sub-sub-col">
<ul>
<li><a href="#">menuitem1.2.2.2.1</a></li>
<li><a href="#">menuitem1.2.2.2.2</a></li>
</ul>
</div>
</a>
</li>
</ul>
</div>
<!--sub-sub-col-->
</a>
</li>
</ul>
</div>
<!--sub-col-->
</a>
</li>
<li><a href="#">Menu-item: 1.2</a><span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
<div class="afs-sub-col">
<ul>
<li><a href="#">Menuitem1.2.1</a></li>
<li><a href="#">Menuitem1.2.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
<div class="afs-sub-sub-col">
<ul>
<li><a href="#">Menuitem1.2.2.1</a></li>
<li><a href="#">Menuitem1.2.2.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
<div class="afs-sub-sub-sub-col">
<ul>
<li><a href="#">menuitem1.2.2.2.1</a></li>
<li><a href="#">menuitem1.2.2.2.2</a></li>
</ul>
</div>
</a>
</li>
</ul>
</div>
<!--sub-sub-col-->
</a>
</li>
</ul>
</div>
<!--sub-col-->
</a>
</li>
<li><a href="#">Menu-item-1.3</a></li>
<li><a href="#">Menu-item-1.4</a></li>
</ul>
</div>
<!--col-->
</div>
<!--dropdown-->
</li>
<li class="afs-menu-item"><a href="#">Menu-item-2</a><span class="afs-children-indenter"><i class="fa fa fa-angle-down"></i></span>
</li>
<li class="afs-menu-item">
<a href="#"><a href="#">Menu-item-3</a></a>
</li>
<li class="afs-menu-item">
<a href="#"><a href="#">Menu-item-4</a></a>
</li>
<div class="afs-back-button">
<a href="#">Fuel System</a>
</div>
</ul>
</div>
<!--inner-->
</div>
<!--container-->
答案 0 :(得分:0)
创建一个新变量,我称之为div
var div = $(".afs-dropdown");
然后你只需添加一个新类或一个新的CSS
div.addClass('height');
当用户再次点击菜单链接时,您可以删除课程
div.removeClass('height');
代码将添加一个名为height
的新类,height
类的css将为height:400px; //or desired amount
。
以下是一个示例:https://codepen.io/anon/pen/MvLjwR
告诉我它是否有帮助!