<?php function getDl_html($dl,$w_val,$dd = null,$w_key){ $dl_html = null; if(count($dl)!= 0){ foreach($w_val as $w_val_key => $w_val_val){ foreach($dl as $dl_key_1 => $dl_val_1 ){ if($dl_val_1['letter']==$w_val_val){ $dd .= '<span><a href="javascript:;">'.$dl_val_1['classname'].'</a></span>'; unset($dl[$dl_key_1]); } //当没有此项的时候 } if($dd){ $dl_1_html = '<dl letter-section="'.$w_key.'" class ="'.$w_key.'">'; $dl_1_html .= '<dt>'.$w_val_val.'</dt>'; $dl_1_html .= '<dd>'.$dd.'</dd></dl>'; $dl_html .= $dl_1_html; } $dd = ''; } } return $dl_html; } $len = count($res); $word = array( 'A-C' => array('A','B','C'), 'D-F' => array('D','E','F'), 'G-I' => array('G','H','I'), 'J-L' => array('J','K','L'), 'M-O' => array('M','N','O'), 'P-R' => array('P','Q','R'), 'S-U' => array('S','T','U'), 'V-X' => array('V','W','X'), 'Y-Z' => array('Y','Z') ); echo '<ul class="depart-list"> '; foreach($res as $key => $val){ $html = null; $spanstart = ' <div class="depart-layer"> <p class="letter-selections"> <span class="meiyou">没有相关分类！！！</span> <span class="within" letter-cur="A-C">A-C</span> <span class="within" letter-cur="D-F">D-F</span> <span class="within" letter-cur="G-I">G-I</span> <span class="within" letter-cur="J-L">J-L</span> <span class="within" letter-cur="M-O">M-O</span> <span class="within" letter-cur="P-R">P-R</span> <span class="within" letter-cur="S-U">S-U</span> <span class="within" letter-cur="V-X">V-X</span> <span class="within" letter-cur="Y-Z">Y-Z</span> </p> '; $divstart = ' <div class="letter-illnesses"> <div class="nav-search-noresult">抱歉，没有找到相关信息！！！</div> '; $divend = '</div>'; $spanend = '</div>'; //全部对应的子菜单 foreach($resParsert as $key_son=>$val_son){ if($val_son['parentid'] == $val['id']){ $dl[] = $val_son; } } //一级菜单 if(($key+1)%3 == 0){ //dl[]每次都是变化的 //构造所有的dl unset($dl_html); foreach($word as $w_key => $w_val){ $dl_html .= getDl_html($dl,$w_val,$dd = null,$w_key); } $parent .= $val['classname'].'';//父类 $html.= '<li class="depart-item"><p class="depart-text">'.$parent.'</p>'; $html.= $spanstart; $html.= $divstart; $html.= $dl_html; $html.= $divend; $html.= $spanend; $html.= '</li>'; //构造 dl echo($html); unset($dl); $parent = ''; }else if($key == $len-1){ //dl[]每次都是变化的 //构造所有的dl foreach($word as $w_key => $w_val){ $dl_html .= getDl_html($dl,$w_val,$dd = null,$w_key); } $parent .= $val['classname'].'';//父类 $html.='<li class="depart-item"><p class="depart-text">'.$parent.'</p>'; $html.=$spanstart; $html.=$divstart; $html.=$dl_html; $html.=$divend; $html.=$spanend; $html.='</li>'; echo $html; unset($dl); }else{ $parent .= $val['classname'].'/'; } } echo '</ul>'; ?>
这段代码写了一天半，我实在羞怯感重。多么复杂的逻辑么？
其实这个效果用ajax做那当然是几好的，但是前段做的效果需要一次性拼好。
效果图：
主分类，三个一组，然后子分类按照拼音分组，然后再分单个拼音组列出（三个主分类的子分类要汇总）。
......
HTML 静态结构
<div class="disease-type"> <p> <input class="depart-ipt" readOnly type="text" value="" /> <span class="as"><i>*</i> 如</span> <span class="cl">呼吸道疾病</span> </p> <div class="cluter-nav"> <ul class="depart-list"> <li class="depart-item"> <p class="depart-text">常见病/呼吸系统/消化系统</p> <div class="depart-layer"> <p class="letter-selections"> <span class="within" letter-cur="A-C">A-C</span> <span class="within" letter-cur="D-F">D-F</span> <span class="within" letter-cur="G-I">G-I</span> <span class="within" letter-cur="J-L">J-L</span> <span class="within" letter-cur="M-O">M-O</span> <span class="within" letter-cur="P-R">P-R</span> <span class="within" letter-cur="S-T">S-T</span> <span class="within" letter-cur="V-W">V-W</span> <span class="within" letter-cur="Y-Z">Y-Z</span> </p> <div class="letter-illnesses"> <div class="nav-search-noresult">抱歉，没有找到相关信息！！！</div> <dl letter-section="A-C" class ="A-C"> <dt>A</dt> <dd> <span><a href="javascript:;">暗疮</a></span> </dd> </dl> <dl letter-section="A-C" class ="A-C"> <dt>B</dt> <dd> <span><a href="javascript:;">斑秃</a></span> <span><a href="javascript:;">白癜风</a></span> <span><a href="javascript:;">扁平疣</a></span> <span><a href="javascript:;">疤痕疙瘩</a></span> <span><a href="javascript:;">斑秃</a></span> <span><a href="javascript:;">白癜风</a></span> <span><a href="javascript:;">扁平疣</a></span> <span><a href="javascript:;">疤痕疙瘩</a></span> </dd> </dl> <dl letter-section="A-C" class ="A-C"> <dt>C</dt> <dd> <span><a href="javascript:;">传染性软疣</a></span> <span><a href="javascript:;">痤疮</a></span> <span><a href="javascript:;">唇炎</a></span> </dd> </dl> <dl letter-section="D-F" class="D-F"> <dt>D</dt> <dd> <span><a href="javascript:;">带状疱疹</a></span> <span><a href="javascript:;">单纯疱疹</a></span> <span><a href="javascript:;">胆碱能性荨麻疹</a></span> </dd> </dl> <dl letter-section="D-F" class="D-F"> <dt>F</dt> <dd> <span><a href="javascript:;">痱子</a></span> <span><a href="javascript:;">风疹</a></span> <span><a href="javascript:;">粉刺</a></span> </dd> </dl> </div> </div> </li> <li class="depart-item"> <p class="depart-text">常见病/呼吸系统/消化系统</p> <div class="depart-layer"> <p class="letter-selections"> <span class="within" letter-cur="A-C">A-C</span> <span class="within" letter-cur="D-F">D-F</span> <span class="within" letter-cur="G-I">G-I</span> <span class="within" letter-cur="J-L">J-L</span> <span class="within" letter-cur="M-O">M-O</span> <span class="within" letter-cur="P-R">P-R</span> <span class="within" letter-cur="S-T">S-T</span> <span class="within" letter-cur="V-W">V-W</span> <span class="within" letter-cur="Y-Z">Y-Z</span> </p> <div class="letter-illnesses"> <div class="nav-search-noresult">抱歉，没有找到相关信息！！！</div> <dl letter-section="A-C" class ="A-C"> <dt>A</dt> <dd> <span><a href="javascript:;">暗疮</a></span> </dd> . </dl> <dl letter-section="A-C" class ="A-C"> <dt>B</dt> <dd> <span><a href="javascript:;">斑秃</a></span> <span><a href="javascript:;">白癜风</a></span> <span><a href="javascript:;">扁平疣</a></span> <span><a href="javascript:;">疤痕疙瘩</a></span> <span><a href="javascript:;">斑秃</a></span> <span><a href="javascript:;">白癜风</a></span> <span><a href="javascript:;">扁平疣</a></span> <span><a href="javascript:;">疤痕疙瘩</a></span> </dd> </dl> <dl letter-section="A-C" class ="A-C"> <dt>C</dt> <dd> <span><a href="javascript:;">传染性软疣</a></span> <span><a href="javascript:;">痤疮</a></span> <span><a href="javascript:;">唇炎</a></span> </dd> </dl> <dl letter-section="D-F" class="D-F"> <dt>D</dt> <dd> <span><a href="javascript:;">带状疱疹</a></span> <span><a href="javascript:;">单纯疱疹</a></span> <span><a href="javascript:;">胆碱能性荨麻疹</a></span> </dd> </dl> <dl letter-section="D-F" class="D-F"> <dt>F</dt> <dd> <span><a href="javascript:;">痱子</a></span> <span><a href="javascript:;">风疹</a></span> <span><a href="javascript:;">粉刺</a></span> </dd> </dl> <dl letter-section="Y-Z" class="Y-Z"> <dt>F</dt> <dd> <span><a href="javascript:;">痱子</a></span> <span><a href="javascript:;">风疹</a></span> <span><a href="javascript:;">粉刺</a></span> </dd> </dl> </div> </div> </li> </ul> </div> </div>