div实现多个js店家加减号展开收缩

展开收缩... 展开收缩 展开
 我来答
赤月说网站
2015-03-25 · TA获得超过1547个赞
知道小有建树答主
回答量:755
采纳率:25%
帮助的人:509万
展开全部

展开收缩的完整代码如下:

<!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>

希望能帮到你

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式