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

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}
无法再将小类循环出来，请求帮助
...全文
94 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 要切换到不同的界面，在这些通过导航切过去的界面上是需要显示底部导航来让用户方便操作的。 除了这些带导航的...
uniapp中使用弹出层后，控制高德地图显隐
uniapp中使用弹出层后，控制高德地图显隐一、获取高德地图key二、下载高德地图的微信小程序sdk三、定义template模板四、定义data样式及相关方法五、相关样式 在uniapp中或者在微信小程序中，map、video等组件的...
QT实现蓝色提示气泡绘制、显隐时机、移动、方向切换等功能
} /** * @brief 通过是否生成lock.txt文件，判断用户是否点击过气泡上“不再提示”按钮或提示用户操作的按钮，用于显隐 * @brief lock.txt文件会跟随软件的拆卸而删除 * @return bool */ bool BubbleTipsWidget::...
python3GUI--网络流量分析系统 By:PyQt5（有配套文档）
如何隐藏界面导航栏指定功能 这个很简单，大家直接去项目根目录/src/core_conf/conf.py 找到tree_item_list这个变量，注释掉指定的功能即可，此方法可以控制一级、二级导航栏显隐 下面我隐藏掉了“关于作者” 五．...
vue面试题
v-if与v-show的区别 1.共同点 都是动态显示DOM元素 ...v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换； （3）编译条件： v-if是惰性的，如...
基础编程

21,893

社区成员

140,347

社区内容

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

加载中

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

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

+ 用AI写文章