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

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}
无法再将小类循环出来，请求帮助
...全文
93 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
  • 打赏
  • 举报
 回复
代码呢?
VUE 爬坑之旅-- 用 Vuex 状态管理来控制底部导航栏的显示隐藏
在做 APP 类项目开发的时候，有一个很常见的需求就是 APP 通常有一个底部导航，点击导航的不同 tab 要切换到不同的界面，在这些通过导航切过去的界面上是需要显示底部导航来让用户方便操作的。 除了这些带导航的页面之外，还有一些独立的页面是不需要底部导航的，比如说注册，登录等页面。那么怎样能够比较方便的控制底部导航的显示和隐藏呢？这就可以用到 Vue 的状态管理插件 Vuex 了，关于 Vue...
uniapp中使用弹出层后，控制高德地图显隐
uniapp中使用弹出层后，控制高德地图显隐一、获取高德地图key二、下载高德地图的微信小程序sdk三、定义template模板四、定义data样式及相关方法五、相关样式 在uniapp中或者在微信小程序中，map、video等组件的优先级特别高，且无法使用z-index来控制弹出层覆盖这些组件，所以需要使用view组件的hidden属性控制map组件的显隐 一、获取高德地图key 在高德地图官网上创建应用并选择api的类型生成相应的key，以下是官方链接 高德地图key 如果不知道如何生成地图的key，以
QT实现蓝色提示气泡绘制、显隐时机、移动、方向切换等功能
蓝色提示气泡上附有提示信息和一个可以点击的按钮，目的是为了引导或提示用户如何操作。文章实现了气泡的绘制，方向切换，显示时机，跟随父窗体移动等功能
python3GUI--网络流量分析系统 By:PyQt5（有配套文档）
本文介绍了一款基于PyQt5开发的网络流量分析系统，具备流量捕获、实时监控、流量仪表盘、流量分析、日志管理等功能。系统采用Scapy进行流量抓取，pyqtgraph进行数据可视化，支持多协议分析，并能实时检测异常流量（如DDoS攻击）。系统还提供了用户管理、登录注册、日志记录等扩展功能。部署过程中可能遇到Python版本、Pillow版本、WinPcap缺失等问题，文中提供了相应的解决方案。系统界面设计为蓝色科技风格，功能丰富，适合网络工程师和安全研究人员使用。
vue面试题
v-if与v-show的区别 1.共同点 都是动态显示DOM元素 2.区别 （1）手段： v-if是动态的向DOM树内添加或者删除DOM元素； v-show是通过设置DOM元素的display样式属性控制显隐； （2）编译过程： v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换； （3）编译条件： v-if是惰性的，如...
基础编程

21,893

社区成员

140,347

社区内容

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

加载中

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

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

+ 用AI写文章