导航
  • 主页
会员中心
收藏
消息
创作中心

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

KyoUs 2009-08-22 11:22:41
数据库 '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}
无法再将小类循环出来，请求帮助
...全文
63 点赞 收藏 3
写回复
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
KyoUs 2009-08-22
上面有段废代码，这个完整些



<?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>
 回复 赞
KyoUs 2009-08-22
<?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>
 回复 赞
dehexiao 2009-08-22
代码呢?
 回复 赞
发动态
发帖子
基础编程
创建于2007-09-28

2.1w+

社区成员

14.0w+

社区内容

从PHP安装配置，PHP入门，PHP基础到PHP应用
申请成为版主
社区公告
暂无公告