1个回答
展开全部
展开收缩的完整代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Asset Management</title>
<link href="css/common.css" type="text/css" rel="stylesheet" media="screen" />
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
//accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
</script>
</head>
<body>
<div class="list">
<ul class="accordion">
<li><a href="#">Research department</a>
<ul class="sub-menu">
<li><a href="#">Uploading resource</a></li>
<li><a href="#">Code editor</a></li>
<li><a href="#">Strategy research</a></li>
<li><a href="#">Historical results</a></li>
</ul>
</li>
<li><a href="#">Investment</a>
<ul class="sub-menu">
<li><a href="#">After the analysis</a></li>
<li><a href="#">Market information</a></li>
</ul>
</li>
<li><a href="#">Operation department</a>
<ul class="sub-menu">
<li><a href="#">Configuration</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Firm control</a></li>
</ul>
</li>
<li><a href="#">Result sharing</a>
<ul class="sub-menu">
<li><a href="#">Information</a></li>
<li><a href="#">Publish</a></li>
<li><a href="#">Freeze Account</a></li>
</ul>
</li>
<li><a href="#">Process handle</a>
<ul class="sub-menu">
<li><a href="#">Add process</a></li>
<li><a href="#">Untreated</a></li>
<li><a href="#">Processed</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
希望能帮到你
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询