一个小问题 本人新手 请高手指点 来着有分 在线等紧急

美丽大道 2009-07-20 09:32:17
如题 我现在有个网页， 网页里面有个地方想用js 做一个类似下拉的特效， 但是要是有好几个项目类型的组以后 就会出现错乱。。。 请高手指点指点，


下面是我们写的方法，不是很好用，要是高手能帮忙实现，或者给出例子 真的不胜感激。 确实是新手。。。。本人一直做得winform程序。。。

function shoppingcat1(id,key){

  var content=document.getElementById(id);

  var key = document.getElementById(key);

  var t=content.style;

  if(t.height==""||t.height==0)

    t.height=minheight;

  var h=parseInt(t.height);

  if(isopen){

    h+=s;

    t.height=h+"px";

    if(h<maxheight){

      setTimeout("shoppingcat('"+id+"','"+key+"');",1);

    }else{

  isopen=0

      key.innerHTML="<img src='images/x-zk-jian.jpg'/>";

    }

  }else{

    h-=s;

    t.height=h+"px";

    if(h>minheight){

      setTimeout("shoppingcat('"+id+"','"+key+"');",1);

    }else{

   isopen=1

      key.innerHTML="<img src='images/x-zk-jia.jpg' />";

    }

  }

}






<!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>

<link rel="stylesheet" href="css/style.css" type="text/css" />

<script src="js/js.js" type="text/javascript"></script>

</head>



<body>

<div class="x-head"><img src="images/x-head.jpg" /></div>

<div class="x-tit">河南油田科技项目管理信息系统 - 网站功能一览</div>

<div class="x-mid">

	<div class="x-mid-list FL">

            <div class="x-mid-list-lm">

            <h3>项目计划</h3>

            <ul>

                <li><a href="#">项目立项审查</a></li>

                <li>

				<div id="content" aa="1"> 

                    <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>

                    <span id="key" onclick="shoppingcat('content','key');"><img src="images/x-zk-jia.jpg"></span>

                    <ul>

                    <li><a href="#">年计划审查</a></li>

                    <li><a href="#">编制计划</a></li>

                    <li><a href="#">生成正式计划</a></li>

                    <li><a href="#">查看计划</a></li>

                    </ul>

                </div>

                </li>

                <li><a href="#">立项计划</a></li>

            </ul>

        </div>

        

        <div class="x-mid-list FL">

            <div class="x-mid-list-lm">

            <h3>项目计划</h3>

            <ul>

                <li><a href="#">项目立项审查</a></li>

                <li>

				<div id="content1" aa="1"> 

                    <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>

                    <span id="key1" onclick="shoppingcat('content1','key1');"><img src="images/x-zk-jia.jpg"></span>

                    <ul>

                    <li><a href="#">年计划审查</a></li>

                    <li><a href="#">编制计划</a></li>

                    <li><a href="#">生成正式计划</a></li>

                    <li><a href="#">查看计划</a></li>

                    </ul>

                </div>

                </li>

                <li><a href="#">立项计划</a></li>

            </ul>

        </div>

        

        <div class="x-mid-list FL">

            <div class="x-mid-list-lm">

            <h3>项目计划</h3>

            <ul>

                <li><a href="#">项目立项审查</a></li>

                <li>

				<div id="content2" aa="1"> 

                    <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>

                    <span id="key2" onclick="shoppingcat('content2','key2');"><img src="images/x-zk-jia.jpg"></span>

                    <ul>

                    <li><a href="#">年计划审查</a></li>

                    <li><a href="#">编制计划</a></li>

                    <li><a href="#">生成正式计划</a></li>

                    <li><a href="#">查看计划</a></li>

                    </ul>

                </div>

                </li>

                <li><a href="#">立项计划</a></li>

            </ul>

        </div>

        

    </div> 

    <div class="x-mid-list FL" style="margin:0px 10px;">1</div>

    <div class="x-mid-list FL" style="margin:0px 10px 0 0;">1</div>

    <div class="x-mid-list FL">1</div>

</div>

</body>

</html>
...全文
129 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
美丽大道 2009-07-31
  • 打赏
  • 举报
 回复
我试了 效果还算不错 不过我希望能单击哪些字所在的框框任意位置都能展开， 而不是只单击那几个字的时候。。。。

怎么实现呢 。。。。


js基本属于一点都不会。。 麻烦高手了。
makeppy 2009-07-21
  • 打赏
  • 举报
 回复
UP
xiongzhijian 2009-07-20
  • 打赏
  • 举报
 回复
up
helanye 2009-07-20
  • 打赏
  • 举报
 回复
up
美丽大道 2009-07-20
  • 打赏
  • 举报
 回复
另外我想知道 有没有更好的方法 这样的话 加入高度不一样了 我就需要很多参数了
美丽大道 2009-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 lihui_shine 的回复:]
1。key控制content的显示和隐藏，肯定得在content的外面
2。拿content的高度是用document.getElementById("content").offsetHeight;
[/Quote]

能不能帮我给改下。。。我对网页是真的不太懂。。。谢谢高手。~~~
浪尖赏花 2009-07-20
  • 打赏
  • 举报
 回复
1。key控制content的显示和隐藏，肯定得在content的外面
2。拿content的高度是用document.getElementById("content").offsetHeight;
unling 2009-07-20
  • 打赏
  • 举报
 回复
顶楼上的 回答的很好。。
美丽大道 2009-07-20
  • 打赏
  • 举报
 回复
h = content.offsetHeight;
content.maxheight = h;


这个offsetHeight 是什么意思啊 为什么他和content height会有影响 这个h一直都是一个值 现在的状态是 要么单击了 它伸展不开 要么他刚开始就是全部展开的没法默认是收缩状态。。。


这个是css的代码



@charset "gb2312";

*						{ margin:0px; padding:0px;}

body					{ color:#333333; font-size:12px; font:"宋体"; background:url(../images/x-head-bg.jpg) repeat-x top;}

a						{ color: #333333;	text-decoration: none;}

a:hover 				{ text-decoration: underline;	color: #333333;}

ul li					{ list-style:none; list-style-type:none;}

img						{ border:0px;}

h1,h2,h3,h4,h5,h6		{ font-size:14px; font-weight:bold; }





.FL						{ float:left; display:inline; overflow:hidden;}

.FR						{ float:right; display:inline; overflow:hidden;}



.x-head,.x-tit,.x-mid

						{ margin:auto; overflow:hidden;}







.x-head{ height:80px; width:980px;}

.x-tit{ height:25px; width:980px; font-size:12px; line-height:25px; color:#000000; text-align:left;}



.x-mid{ height:auto; width:980px; padding-top:20px;}

.x-mid-list{ height:auto; width:235px;}

.x-mid-list-lm{ height:auto; width:100%; margin-bottom:10px;}

.x-mid-list-lm h3{ height:18px; width:100%;text-align:left; padding:8px 0 0 22px;color:#0a256a; background:url(../images/x-tit.jpg) no-repeat; border-bottom:1px #a1c2f2 solid; float:left;}

.x-mid-list-lm ul{ height:100%; width:228px; font-size:12px; float:left; background-color:#fafcfe; border:1px #a1c2f2 solid; border-top:none; padding-left:5px; padding-top:6px;}

.x-mid-list-lm li{ width:100%;float:left; display:list-item; float:left; padding:3px 0 4px 0;}

.x-mid-list-lm li a{text-decoration: none; color: #004499; padding-left:18px;background:url(../images/x-ico-a.jpg) left no-repeat; background-position:3px 3px;}

.x-mid-list-lm li a:hover{text-decoration: none;color: #ff0000; background:url(../images/x-ico-hover.jpg) left no-repeat; background-position:3px 3px;}



#content

		 {font-size: 12px;width: 200px; overflow:hidden;}





#key,#key1

		{ color: red;margin-top:-14px; float:left;}

span{ cursor:pointer;  float:right;}



美丽大道 2009-07-20
  • 打赏
  • 举报
 回复
楼上的高手 我研究了半天 发现 key.isopen 这个是什么意思 没有这个属性吧 什么时候怎么给他赋值啊
关于提问的问题
其实早就写篇关于提问的文章，但是一直瞎忙吧。一拖再拖，终于偷的半刻，来弄点东西。 其实学习的过程，不用我说，陌生的东西，刚开始大家接触慢慢接触，之后会有问题出现： 这个怎么跟xxx 不一样呀？诸如 这个代码怎么过不去呀？有的干脆直接去百度，发帖，到群里去问别人。异或自己一直死磕着等等吧 有的去问还说跪求 ，寒冬中。。。。等等怎么来着，这些不都些扯淡的话吗？还不如把问题说的更详细些有用。那是否有
我在CSDN参与的3000个帖子
 今日偶然翻到，感慨万千 1：申述：版主，是否扣了我的专家分？ 2：100分急求，随机输出十个小写字母，但是，要求这十个字母不相同 3：求Sn=a+aa+aaa+…+aaa…a（n个a）之值 4：数组题 望高手帮忙！ 5：呵呵，来推荐一下我的网站，本站提供大量当今流行的免费的音乐和免费电影，常用软件、游戏、精美图库下载,希望对网友有帮助!顺便散分! 6：VBA请教怎
23岁的一无所有，其实是理所应当的
23 岁那年你正处在哪个状态？现在呢？  我，23岁，应届毕业生。生活，工作，爱情都处于人生的低谷，一穷二白，一无所有，一事无成。 分享一下成长的建议吧。 匿名用户 23岁那年...就是去年......  在22岁的时候我毕业，同时第二年准备考研，结果因为压力太大，期望太高，又失利了，但是我依然满怀信心和憧憬  在我23岁那年四月，当我深爱的女孩（在这之前我追了她四年）说她要去北
如果你也23岁
分享一下这篇文章： 23 岁那年你正处在哪个状态？现在呢？  我，23岁，应届毕业生。生活，工作，爱情都处于人生的低谷，一穷二白，一无所有，一事无成。 分享一下成长的建议吧。 匿名用户 23岁那年...就是去年......  在22岁的时候我毕业，同时第二年准备考研，结果因为压力太大，期望太高，又失利了，但是我依然满怀信心和憧憬  在我23岁那年四月，当我深爱的女孩（在这之
如何做职业规划并进行求职准备（持续更新）
读《这些道理没有人告诉过你》的职业规划思考 1.根据初步判断，我最适合的职位应该是软件测试工程师 2.根据初步判断，我最适合的行业应该是软件测试行业?互联网行业？互联网金融行业？电商行业？（不太清楚行业的分类，暂时先这么写吧） 3.根据职位与行业，我选定的目标公司应该是： 最高目标公司三家：阿里巴巴集团 、天猫 、京东 （亚马逊、沃尔玛百货公司、 苏宁云商集团股份有...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章