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

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}
无法再将小类循环出来，请求帮助
...全文
91 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
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
  • 打赏
  • 举报
 回复
代码呢?
uniapp中使用弹出层后，控制高德地图显隐
uniapp中使用弹出层后，控制高德地图显隐一、获取高德地图key二、下载高德地图的微信小程序sdk三、定义template模板四、定义data样式及相关方法五、相关样式 在uniapp中或者在微信小程序中，map、video等组件的优先级特别高，且无法使用z-index来控制弹出层覆盖这些组件，所以需要使用view组件的hidden属性控制map组件的显隐 一、获取高德地图key 在高德地图官网上创建应用并选择api的类型生成相应的key，以下是官方链接 高德地图key 如果不知道如何生成地图的key，以
【网页布局技术】项目五 使用CSS设置导航栏
带你以项目形式从头学div+css的布局方式
VUE 爬坑之旅-- 用 Vuex 状态管理来控制底部导航栏的显示隐藏
在做 APP 类项目开发的时候，有一个很常见的需求就是 APP 通常有一个底部导航，点击导航的不同 tab 要切换到不同的界面，在这些通过导航切过去的界面上是需要显示底部导航来让用户方便操作的。 除了这些带导航的页面之外，还有一些独立的页面是不需要底部导航的，比如说注册，登录等页面。那么怎样能够比较方便的控制底部导航的显示和隐藏呢？这就可以用到 Vue 的状态管理插件 Vuex 了，关于 Vue...
ArkTS组件Navigation
Text("当前进度：" + config.value + "/" + config.total).fontSize(20)Row() {Path()Path()Path()Path()Path()@Entry@Componentbuild() {Column(){this.wjx++})this.wjx--})无操作时样式一星。
QT实现蓝色提示气泡绘制、显隐时机、移动、方向切换等功能
蓝色提示气泡上附有提示信息和一个可以点击的按钮，目的是为了引导或提示用户如何操作。文章实现了气泡的绘制，方向切换，显示时机，跟随父窗体移动等功能
基础编程

21,893

社区成员

140,347

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章