逻辑处理

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