<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<style>
.choose {
margin: .5em 0;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
.choose-show {
padding: .5em;
font-size: 14px;
}
.choose-hidden {
position: relative;
z-index: 999;
}
.choose-hidden-nav {
width: 50%;
float: left;
}
.choose-hidden-nav ul {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
.choose-hidden-nav ul li {
padding: 6px 0 6px 0;
background-color: #ccdce0;
}
.choose-hidden-nav ul li.active {
background-color: #d9f5fc;
}
.choose-hidden-content {
width: 50%;
float: left;
}
.choose-hidden-content ul {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
background-color: #d9f5fc;
}
.choose-hidden-content ul li {
padding: 6px 0 6px 0;
}
</style>
</head>
<body>
<div class="choose">
<div class="choose-show">防冻液更换 <i class="fa fa-chevron-down"></i></div>
<!--BEGIN CHOOSE-HIDDEN -->
<div class="choose-hidden" style="display:none">
<div class="choose-hidden-nav">
<ul>
<li class="active" name="cont1"><a>汽车美容</a></li>
<li name="cont2"><a>美容</a></li>
</ul>
</div>
<div class="choose-hidden-content cont1">
<ul class="active">
<li><a>洗车</a></li>
<li><a>护理</a></li>
</ul>
</div>
<div class="choose-hidden-content cont2" style="display:none">
<ul>
<li><a>234</a></li>
<li><a>234</a></li>
</ul>
</div>
</div>
<!--END CHOOSE-HIDDEN -->
</div>
<script src="jQuery-2.1.4.min.js"></script>
<script>
$(".choose-show").click(function () {
$(".choose-hidden").toggle();
})
$("document").ready(function () {
$(".choose-hidden-nav>ul>li").each(function () {
$(this).click(function () {
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings('.active').removeClass('active');
} else {
$(this).siblings('.active').removeClass('active');
}
var target = $(this).attr('name');
$("." + target).show();
$("." + target).siblings('.choose-hidden-content').hide();
});
});
});
</script>
</body>
</html>