手风琴+tab选项卡切换相结合效果

最新推荐文章于 2022-12-10 21:48:27 发布

金翅

最新推荐文章于 2022-12-10 21:48:27 发布

阅读量898

点赞数

分类专栏：动画效果 html5+css3

本文链接：https://blog.csdn.net/qq_37103514/article/details/92830267

版权

html5+css3 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

动画效果

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现导航栏</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        body{
            display: flex;
            justify-content: center;
        }
        div{
            width: 400px;
            height: 600px;
            display: inline-block;
            border: 4px solid #ccc;
            border-radius: 10px;
            float: left;
            margin: 60px 40px;
        }
        div p{
            margin: 40px auto;
            text-align: center;
            letter-spacing: 6px;
        }
        ul{
            width: 140px;
            background-color: antiquewhite;
            margin: 0 20px;
            padding: 0 0 0px 0;
            list-style: none;
            border-top: 2px solid #ccc;
            border-left: 2px solid #ccc;
            border-right: 2px solid #ccc;
            margin: 0 auto;
            overflow: hidden;
        }
        ul span{
            width: 100%;
            display: inline-block;
            background-color: #a0beb0;
            padding: 0px 6px;
            box-sizing: border-box;
            cursor: pointer;
        }
        ul span b{
            float: right;
        }
        ul li{
            display: none;
            cursor: pointer;
        }
        ul li:hover{
            background-color: #bbdbcd;
        }
		.tab{display: none;}
		.js_color{color: red !important;}
		.ul1 li{display: block;}
    </style>

    <script>
        $(function(){

            // 手风琴菜单效果
            $('#box2 span').click(function(){
                var curLi=$(this).parent().find('li');              //获得当前点击的菜单的二级菜单
                var restUl=$(this).parent().siblings('ul');         //获得没有点击的一级菜单
                // 通过判断二级菜单是否收起，来进行判断是否展开，并更换"+ -"表示
                if(curLi.css('display') == 'none') {
                    curLi.slideDown();
                    curLi.parent().find('b').text('-');
                }
                else {
                    curLi.slideUp();
                    curLi.parent().find('b').text('+');
                }
                // 没有点击的二级菜单全部收起，并将标志全部改为"+"
                restUl.find('li').slideUp();
                restUl.find('b').text('+');
				
            });
			// tab切换
				$('#box2 ul li').click(function() {
					//查找父级UL所在位置,看他是第几个
					var ul_num = $(this).parents('ul').index();
					console.log(ul_num)
					var li_num = 0;
					if(ul_num>0){
						//如果不是第一个,循环他前边的所有UL
						for (var i=0;i<ul_num-1;i++){
							//查找UL一共有多少li
							li_num += $('#box2 ul').eq(ul_num).find('li').length;
						}
						//查找当前LI所处的位置
						li_num += $(this).index();
						//查找第一个UL中所有LI的个数
						li_num += $('#box2 ul').eq(0).find('li').length;
					}else{
						li_num += $(this).index();
					}
					//字体颜色变化
					$('#box2 li').removeClass('js_color');
					$(this).addClass('js_color');
					//模拟点击左侧标题 右侧切换	
					$(".tab").hide().eq(li_num-1).show();
				})
        });

    </script>
</head>
<body>
    <div id="box2">
        <ul class="ul1">
            <span>悬疑推理 <b>+</b></span>
            <li class="js_color">分类一</li>
			<li>分类二</li>
        </ul>
       <ul>
            <span>古装武侠 <b>+</b></span>
            <li>分类一</li>
            <li>分类二</li>
        </ul>
        <ul>
            <span>职场小说 <b>+</b></span>
			<li>分类一</li>
            <li>分类二</li>
        </ul>

        <ul>
            <span>仙侠奇幻 <b>+</b></span>
			<li>分类一</li>
            <li>分类二</li>
        </ul>
    </div>
	<div class="tab" style="display: block;">
		1111
	</div>
	<div class="tab">
		2222
	</div>
	<div class="tab">
		3333
	</div>
	<div class="tab">
		4444
	</div>
	<div class="tab">
		5555
	</div>
	<div class="tab">
		6666
	</div>
	<div class="tab">
		7777
	</div>
	<div class="tab">
		8888
	</div>
</body>
</html>