包含点击侧边伸缩代码的词条

本篇文章给大家谈谈点击侧边伸缩代码，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js控制div伸缩的代码
• 2、html中伸缩菜单是怎么做出来的
• 3、html编写伸缩框，就是带三角的那种点击伸展，再点击收缩，求代码。
• 4、点击一个按钮，可以实现网页左右版面的伸缩隐藏
• 5、求js点击展开代码

js控制div伸缩的代码

!DOCTYPE html

html

head

script type="text/javascript" src=""/script

script type="text/javascript"

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

});

});

/script

style type="text/css"

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

/style

/head

body

div class="panel"

p内容内容内容内容内容内容/p

p内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容/p

/div

p class="flip"请点击这里/p

/body

/html

就是用jquery的slideToggle就可以了

html中伸缩菜单是怎么做出来的

html中伸缩菜单，靠当独的一个html或者是css做不出来的，一般是结合jQ或者是js来实现，这里我就用JS来举例吧，主要是做好一个目录，一般是用ul、li去布局好就行，然后在给一个id，在通过Js去获取对象，然后设置鼠标的hover事件就可以了，这里我提交代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

title简洁实用的二级下拉导航菜单/title

meta http-equiv="content-type" content="text/html;charset=gb2312"

!--把下面代码加到head与/head之间--

style type="text/css"

body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}

#mainNavBar{width:100%;background:#999;padding:10px 0;}

#nav{width:760px;height:30px;margin:0 auto;}

#nav ul{padding:0;margin:0;}

#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

#nav ul li a{display:block;color:#fff;text-decoration:none;}

#nav ul li a:hover{font-weight:bold;background:#666;}

#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}

#subNav a{text-decoration:none;font-weight:normal;display:block;}

#subNav a:hover{color:#f00;background:#f00;}

/style

/head

body

!--把下面代码加到body与/body之间--

div id="mainNavBar"

div id="nav"

ul

li

a href="#"Add/a

div id="subNav"

a href="#"写日志/a

a href="#"增加分类/a

/div

/li

li

a href="#"Edit/a

div id="subNav"

a href="#"修改分类/a

a href="#"文章编辑/a

/div

/li

li

a href="#"Admin/a

div id="subNav"

a href="#"文章管理/a

a href="#"评论管理/a

a href="#"留言管理/a

a href="#"退出/a

/div

/li

/ul

/div

/div

script language="javascript"

var nav=document.getElementById("nav").getElementsByTagName("li");

for(i=0;inav.length;i++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold";

this.style.overflow="visible";

this.style.background="#666666";

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal";

this.style.background="#999999"

this.style.overflow="hidden";

}

}

/script

/body

/html

#header #shousuo{

width:950px;

height:50px;

background:#f4f4f4;

margin-top:10px;

}

#shousuo ul li{

line-height:50px;

list-style-type:none;

float:left;

margin-left:5px;

font-weight:bold;

font-size:14px;

html编写伸缩框，就是带三角的那种点击伸展，再点击收缩，求代码。

!doctype html

html lang="en"

head

meta charset="utf-8" /

titlejQuery UI Accordion - Default functionality/title

link rel="stylesheet" href="" /

script src=""/script

script src=""/script

link rel="stylesheet" href="/resources/demos/style.css" /

script

$(function() {

$( "#accordion" ).accordion();

});

/script

/head

body

div id="accordion"

h3Section 1/h3

div

p

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit

amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut

odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

/p

/div

h3Section 2/h3

div

p

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet

purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor

velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In

suscipit faucibus urna.

/p

/div

h3Section 3/h3

div

p

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.

Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero

ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis

lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

/p

ul

liList item one/li

liList item two/li

liList item three/li

/ul

/div

h3Section 4/h3

div

p

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

mauris vel est.

/p

p

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

inceptos himenaeos.

/p

/div

/div

/body

/html

点击一个按钮，可以实现网页左右版面的伸缩隐藏

这个通常是用网页上的Frame来实现的

点击按钮时，改变某个Frame的width，再点击就恢复回来。

用Javascript脚本即可实现。

求js点击展开代码

大哥，你这点分，谁帮你找呀，这个很麻烦的。。。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

""

html xmlns=""

head

titleruncode/title

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

script type="text/javascript"

var mh = 30;//最小高度

var step = 5;//每次变化的px量

var ms = 10;//每隔多久循环一次

function toggle(o){

if (!o.tid)o.tid = "_" + Math.random() * 100;

if (!window.toggler)window.toggler = {};

if (!window.toggler[o.tid]){

window.toggler[o.tid]={

obj:o,

maxHeight:o.offsetHeight,

minHeight:mh,

timer:null,

action:1

};

}

o.style.height = o.offsetHeight + "px";

if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);

window.toggler[o.tid].action *= -1;

window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );

}

function anim(id){

var t = window.toggler[id];

var o = window.toggler[id].obj;

if (t.action 0){

if (o.offsetHeight = t.minHeight){

clearTimeout(t.timer);

return;

}

}

else{

if (o.offsetHeight = t.maxHeight){

clearTimeout(t.timer);

return;

}

}

o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";

window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );

}

/script

style type="text/css"

div.xx{border:solid 1px;overflow:hidden;}

div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#E7F5F8;}

/style

/head

body

div class="xx"h5 onclick="toggle(this.parentNode)"点击我看"伸缩效果"/h5

tabletrtd

p中国站长站/p

p站长素材站/p

p站长脚本站/p

p站长下载/p

/td/tr/table

/div

/body

/html

点击侧边伸缩代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、点击侧边伸缩代码的信息别忘了在本站进行查找喔。