mainly want to achieve a single multiple selection function, need to be met at the same time:
1, click any option can be selected, unchecked;
2, click custom option, can expand more content;
3, click other options, can hide more content because of clicking "Custom".
the screenshot of the page and the complete code are as follows:
< hr > 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.filter-condition{ padding: 10px 0; }
.filter-condition .list1 h4{ font-size: 14px; background: -sharpfff; color: -sharp333; margin-top: 0; padding: 6px 10px; }
.filter-condition .list1 h4 a{ padding: 0 4px 0 10px; float: right;}
.filter-condition .list1 h4 em{ font-style: normal; padding-right: 4px; font-weight: 300; font-size: 12px;}
.filter-condition .list1 h4 .minus i{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); }
.filter-condition .list1 h4 span{ color: -sharpf00; padding-left: 4px; }
.filter-condition .list1 .custom_nav_n {padding:4px 2px 0; overflow:hidden;position:relative}
.filter-condition .list1 .custom_a {float:left;width:25%;padding:0 8px;margin:0 0 12px;
-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.filter-condition .list1 .custom_a:hover,.custom_a:link,.custom_a:visited,.custom_s {color:-sharp1a1a1a}
.filter-condition .list1 .custom_s {display:block;height:34px;line-height:32px;overflow: hidden;font-size:13px; background: -sharpf5f5f5; border-radius:4px;text-align:center;position:relative;opacity:1}
.filter-condition .list1 .active{ background: -sharpfff4ee; color:-sharpff7028;border:0px solid -sharpececec;}
.filter-condition .list1 .active::after{content:"";background:url(../images/active.svg) no-repeat;background-size:20px;width:20px;height:20px;position: absolute; right:0px; bottom:0px; }
.filter-button .custom_button { overflow:hidden;position:relative;background:-sharpfff;margin-top:4px;border-top:1px solid -sharpf1f2f3;}
.filter-button .button_a1 {float:left;width:40%; -webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.filter-button .button_a2 {float:left;width:60%; -webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.filter-button .button_s1 {display:block;height:44px;line-height:44px;font-size:14px;background:-sharpf8f8f8; color: -sharp999; text-align:center;position:relative;opacity:1}
.filter-button .button_s2 {display:block;height:44px;line-height:44px;font-size:14px;background:-sharpCE9940; color: -sharpfff; text-align:center;position:relative;opacity:1}
</style>
</head>
<body>
<div class="mui-content" style="max-width: 600px;margin: 0 auto;background: -sharpfff;">
<div class="ca-filter" >
<div class="filter-condition" >
<div class="list1" id="selectList">
<h4>1</h4>
<div id="itemssx1">
<div class="list-row">
<nav class="custom_nav_n">
<a class="custom_a" href="-sharp"><span class="custom_s">1</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">2</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">3</span></a>
<a class="custom_a" href="javascript：void(0);" onclick="showHide(this,"itemsll");" ><span class="custom_s"></span></a>
</nav>
<div id="itemsll" style="display: none; ">
<div class="filter-input-row" style="background: -sharpffce54; font-size:12px;border: 1px solid -sharpeee;">
</div>
</div>
</div>
</div>
<h4 style="margin-top: 20px;">2</h4>
<div id="itemssx2" class="filter-item-2">
<div class="list-row">
<nav class="custom_nav_n">
<a class="custom_a" href="-sharp"><span class="custom_s">a</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">b</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">c</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">d</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">e</span></a>
</nav>
</div>
</div>
<h4 style="margin-top: 20px;"></h4>
<div id="itemssxN" class="filter-item-2">
<div class="list-row">
<nav class="custom_nav_n">
<a class="custom_a" href="-sharp"><span class="custom_s">a</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">b</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">c</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">d</span></a>
<a class="custom_a" href="-sharp"><span class="custom_s">e</span></a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function getObject(objectId){
if(document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId);
}else if(document.all && document.all(objectId)){
return document.all(objectId);
}else if(document.layers && document.layers[objectId]){
return document.layers[objectId];
}else{
return false;
}
}
function showHide(e,objname){
var obj = getObject(objname);
if(obj.style.display == "block"){
obj.style.display = "none";
}
else{
obj.style.display = "block";
obj.style.height = "auto";
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("-sharpitemssx1 .custom_s").on("click", function () {
$("-sharpitemssx1 .custom_s").removeClass("active");
$(this).addClass("active");
});
$("-sharpitemssx2 .custom_s").on("click", function () {
$("-sharpitemssx2 .custom_s").removeClass("active");
$(this).addClass("active");
});
$("-sharpitemssxN .custom_s").on("click", function () {
$(this).toggleClass("active");
});
});
</script>
</body>
</html>