求带有显隐的动态生成导航

Question

数据库 'ABCDE'
ID  NAME  BIG  SMALL
 1   a1    A    Aa
 2   a2    A    Ab
 3   a3    A    Ab
 4   a1    B    Ba
 5   b2    B    Ba
 6   b3    B    Bb
 7   c1    C    Ca
 8   c2    C    Ca
 9   c3    C    Cb
10   c4    C    Cc将其数据库生成一个带显示和隐藏的分类导航显示效果
    -[A]
      {Aa}
      {Ab}
    -[B]
      {Ba}
      {Bb}
    -[C]
      {Ca}
      {Cb}
      {Cc}隐藏效果
    +[A]
    +[B]
    +[C]
我做的代码逻辑顺序有问题，只能生成到
    -[A]
      {Aa}
    -[B]
      {Ba}
    -[C]
      {Ca}
无法再将小类循环出来，请求帮助
      

Answer 1

<?php
  include "include.php"; 
  @$_typeid = $_GET["id"];    //获取地址栏id值
  @$_cppage = $_GET["page"];  //获取地址栏page值
  
  if($_cppage ==""){
     $_cppage = 1;
  }
  //翻页功能------------------------------------------------------------------------
  if($_cppage){  
    //当typeid有值时-----------------------------------
$page_size=5;
    $cp_query="select count(*) as total from product where id";
$cp_result=mysql_query($cp_query);
$message_count=mysql_result($cp_result,0,"total");
$page_count=ceil($message_count/$page_size);
$offset=($_cppage-1)*$page_size;
$myquery="select * from product where id order by id desc limit $offset,$page_size";
$myresult=mysql_query($myquery);
  }  //导航------------------------------------------------------------------------
  $_dha = "select id,cp_bigtype,cp_smalltype,count(cp_smalltype) from product group by cp_smalltype order by cp_bigtype,cp_smalltype ASC";
  $_myquerydha = mysql_query($_dha);
  //------------------------------------------------------------------------
?>
<script language="javascript">var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; 
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; 
var DIV_HEIGHT = 22; 
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv//DD added code
document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')function Init(objDiv)
{
    if (TIMER_SLIDE == null)
    {
        SUB_MENU_NUM = 0;
        MainDiv = objDiv.parentNode;
        SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);
        SubDiv.onclick = SetSlide;
        
        OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
        OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);    document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
    DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code
        
        for (i=0;i<OBJ_VIEW.childNodes.length;i++)
        {
            if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
            {
                SUB_MENU_NUM ++;
                OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
                OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
            }
        }   
        
              NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); 
    }}
function SetSlide()
{   
   if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
      if (TIMER_SLIDE == null && this.parentNode == MainDiv)
            TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
      else
      {
          RE_INIT_OBJ = this;
          setTimeout('ReInit()', 200);
      }
}function ReInit(obj)
{
    Init(RE_INIT_OBJ);
    TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
    RE_INIT_OBJ = null;
}function RunSlide()
{    if (OBJ_VIEW.getAttribute("state") == 0)
    {        NEW_PIX_VAL += PIX_SLIDE;
        OBJ_SLIDE.style.height = NEW_PIX_VAL;        if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
        {
            clearInterval(TIMER_SLIDE);
            TIMER_SLIDE = null;
            OBJ_VIEW.style.display = 'inline';
            OBJ_VIEW.setAttribute("state","1")
            MainDiv.setAttribute("state",NEW_PIX_VAL);
        }
    } else
    {
        OBJ_VIEW.style.display = 'none';
        NEW_PIX_VAL -= PIX_SLIDE;
        if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
        if (NEW_PIX_VAL <= 0)
        {
            NEW_PIX_VAL = 0;
            OBJ_SLIDE.style.height = NEW_PIX_VAL
            clearInterval(TIMER_SLIDE);
            TIMER_SLIDE = null;
            OBJ_VIEW.setAttribute("state","0")
            MainDiv.setAttribute("state",NEW_PIX_VAL);
        }
    }
}function ChangeStyle()
{
    if (this.className == this.getAttribute("classOut"))
        this.className = this.getAttribute("classOver");
    else
        this.className = this.getAttribute("classOut");
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title></head>
<style type="text/css">
  
.mainDiv
{
  width:160px;
}
.topItem
{
  width:160px;
  height:22px;
  cursor:pointer;
  background: #467BF2;
  text-decoration: none;
  color: white; 
  font-weight:bold;
  font-family:"GOTHIC";
 
}
.dropMenu
{
  background:#D9D9D9;
  border-top:1px solid #467BF2;
  border-left:1px solid #92B1F8;
  border-right:1px solid #92B1F8;
  border-bottom:1px solid #92B1F8;
}.subMenu
{
   display:none;
}
.subItem
{
   padding-left:5px;
   cursor:pointer;
   font-weight:bold;
   text-decoration:none;
   color:black;
}.subItem a
{
   text-decoration:none;
   color:black;
}.subItemOver
{
   cursor:pointer;
   color:blue;
   text-decoration:underline;
   font-weight:bold;
   padding-left:5px;
}.subItemOver  a
{
   color:blue;
}
.drop
{
   border-left:1px solid black;
   border-right:1px solid black; 
}
</style>
<body>
<?php /*?><?php
  $_mynull = "";
          while($_mydha = mysql_fetch_array($_myquerydha)){
               if($_mydha['cp_bigtype']!=$_mynull){
      echo "<h5 class=topItem classOut=topItem classOver=topItemOver onMouseOver=Init(this)>".$_mydha['cp_bigtype']."</h5>"."<div state=0><span classOut=subItem classOver=subItemOver><a href=?id=".$_mydha['cp_smalltype'].">".$_mydha['cp_smalltype']."</a></span></div><br />";
   }else{
      echo "<div state=0><span classOut=subItem classOver=subItemOver><a href=?id=".$_mydha['cp_smalltype'].">".$_mydha['cp_smalltype']."</a></span></div><br />";
   }
   $_mynull = $_mydha['cp_bigtype'];
  }
?>  <?php */?>  
<!--------Start Menu---------->
<?php 
  $_mynull = "";
  while($_mydha = mysql_fetch_array($_myquerydha)){
?>
<div class="mainDiv" state="0">
<?php
  if($_mydha['cp_bigtype']!=$_mynull){
?>
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" ><?php echo $_mydha['cp_bigtype']; ?></div>        
<div class="dropMenu" >
 <div class="subMenu" state="0">  <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#"><?php echo $_mydha['cp_smalltype']; ?></a></span><br/>
  
　</div>
</div>
<?php
}else{
?>
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#"><?php echo $_mydha['cp_smalltype']; ?></a></span><br/>
  
<?php }$_mynull = $_mydha['cp_bigtype']; } ?>
 
</div><!--------End Menu---------->
</body>
</html>

Answer 2

上面有段废代码，这个完整些<?php
  include "include.php"; 
  @$_typeid = $_GET["id"];    //获取地址栏id值
  @$_cppage = $_GET["page"];  //获取地址栏page值
  
  if($_cppage ==""){
     $_cppage = 1;
  }
  //翻页功能------------------------------------------------------------------------
  if($_cppage){  
    //当typeid有值时-----------------------------------
$page_size=5;
    $cp_query="select count(*) as total from product where id";
$cp_result=mysql_query($cp_query);
$message_count=mysql_result($cp_result,0,"total");
$page_count=ceil($message_count/$page_size);
$offset=($_cppage-1)*$page_size;
$myquery="select * from product where id order by id desc limit $offset,$page_size";
$myresult=mysql_query($myquery);
  }  //导航------------------------------------------------------------------------
  $_dha = "select id,cp_bigtype,cp_smalltype,count(cp_smalltype) from product group by cp_smalltype order by cp_bigtype,cp_smalltype ASC";
  $_myquerydha = mysql_query($_dha);
  //------------------------------------------------------------------------
?>
<script language="javascript">var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; 
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; 
var DIV_HEIGHT = 22; 
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv//DD added code
document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')function Init(objDiv)
{
    if (TIMER_SLIDE == null)
    {
        SUB_MENU_NUM = 0;
        MainDiv = objDiv.parentNode;
        SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);
        SubDiv.onclick = SetSlide;
        
        OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
        OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);    document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
    DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code
        
        for (i=0;i<OBJ_VIEW.childNodes.length;i++)
        {
            if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
            {
                SUB_MENU_NUM ++;
                OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
                OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
            }
        }   
        
              NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); 
    }}
function SetSlide()
{   
   if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
      if (TIMER_SLIDE == null && this.parentNode == MainDiv)
            TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
      else
      {
          RE_INIT_OBJ = this;
          setTimeout('ReInit()', 200);
      }
}function ReInit(obj)
{
    Init(RE_INIT_OBJ);
    TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
    RE_INIT_OBJ = null;
}function RunSlide()
{    if (OBJ_VIEW.getAttribute("state") == 0)
    {        NEW_PIX_VAL += PIX_SLIDE;
        OBJ_SLIDE.style.height = NEW_PIX_VAL;        if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
        {
            clearInterval(TIMER_SLIDE);
            TIMER_SLIDE = null;
            OBJ_VIEW.style.display = 'inline';
            OBJ_VIEW.setAttribute("state","1")
            MainDiv.setAttribute("state",NEW_PIX_VAL);
        }
    } else
    {
        OBJ_VIEW.style.display = 'none';
        NEW_PIX_VAL -= PIX_SLIDE;
        if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
        if (NEW_PIX_VAL <= 0)
        {
            NEW_PIX_VAL = 0;
            OBJ_SLIDE.style.height = NEW_PIX_VAL
            clearInterval(TIMER_SLIDE);
            TIMER_SLIDE = null;
            OBJ_VIEW.setAttribute("state","0")
            MainDiv.setAttribute("state",NEW_PIX_VAL);
        }
    }
}function ChangeStyle()
{
    if (this.className == this.getAttribute("classOut"))
        this.className = this.getAttribute("classOver");
    else
        this.className = this.getAttribute("classOut");
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title></head>
<style type="text/css">
  
.mainDiv
{
  width:160px;
}
.topItem
{
  width:160px;
  height:22px;
  cursor:pointer;
  background: #467BF2;
  text-decoration: none;
  color: white; 
  font-weight:bold;
  font-family:"GOTHIC";
 
}
.dropMenu
{
  background:#D9D9D9;
  border-top:1px solid #467BF2;
  border-left:1px solid #92B1F8;
  border-right:1px solid #92B1F8;
  border-bottom:1px solid #92B1F8;
}.subMenu
{
   display:none;
}
.subItem
{
   padding-left:5px;
   cursor:pointer;
   font-weight:bold;
   text-decoration:none;
   color:black;
}.subItem a
{
   text-decoration:none;
   color:black;
}.subItemOver
{
   cursor:pointer;
   color:blue;
   text-decoration:underline;
   font-weight:bold;
   padding-left:5px;
}.subItemOver  a
{
   color:blue;
}
.drop
{
   border-left:1px solid black;
   border-right:1px solid black; 
}
</style>
<body><!--------Start Menu---------->
<?php 
  $_mynull = "";
  while($_mydha = mysql_fetch_array($_myquerydha)){
?>
<div class="mainDiv" state="0">
<?php
  if($_mydha['cp_bigtype']!=$_mynull){
?>
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" ><?php echo $_mydha['cp_bigtype']; ?></div>        
<div class="dropMenu" >
 <div class="subMenu" state="0">  <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#"><?php echo $_mydha['cp_smalltype']; ?></a></span><br/>
  
　</div>
</div>
<?php
}else{
?>
<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#"><?php echo $_mydha['cp_smalltype']; ?></a></span><br/>
  
<?php }$_mynull = $_mydha['cp_bigtype']; } ?>
 
</div><!--------End Menu---------->
</body>
</html>