展开/收缩DIV层面板(Open/Close Div Layers)
2009-12-21 15:14
381 查看
Open/Close Div Layers
This code snippet demonstrates using a 'container' div, which can be expanded or collapsed to show/hide blocks of content.For my javascript function names, I pondered items that are opened and closed. I considered eyes, cupboards, drawers, even silly sock hand puppets, but finally decided upon a lunchbox. If I were a betting man, I'd be willing to bet that everyone who sees this webpage has owned, or at least seen, a lunchbox. Purt' near 70 years have passed since I was a lunchbox-toting lad, but I vaguely recall my favorite lunchbox - it was a real dandy depicting a team of superheroes known as The Herculoids. I was particularly fond of Gloop and Gleep, those darn cute little blobby things. But I digress...
Pack the Lunchbox (HTML)
First, we'll create the HTML, consisting of a pair of <div> layers for each lunchbox. The first <div> layer (clasp_x) will use a hyperlink to trigger our javascript function that displays the contents of the second <div> (lunch_x). I've supplied the code for two lunchboxes below, but you can add as many more as you like, by incrementing the numeric suffix (x) of each pair of layer id's. Now you can add this HTML code to your page:<div id="clasp_1" class="clasp"><a href="javascript:lunchboxOpen('1');" mce_href="javascript:lunchboxOpen('1');">Open Lunchbox 1...</a></div> <div id="lunch_1" class="lunchbox">This is lunchbox 1<br />Peanut Butter & Jelly<br />Potato Chips<br />Apple</div> <div id="clasp_2" class="clasp"><a href="javascript:lunchboxOpen('2');" mce_href="javascript:lunchboxOpen('2');">Open Lunchbox 2...</a></div> <div id="lunch_2" class="lunchbox">This is lunchbox 2<br />Liverwurst (bleh!)<br />Twinkies<br />Fig Newtons</div>
Hide the Lunchbox (CSS)
Next, we'll create a couple of CSS classes, one of which will hold the hyperlink, and another whose contents are initially not displayed on the web page. Add these class definitions to your CSS stylesheet:.clasp { text-align:center; } .lunchbox { display:none; }
Open & Close the Lunchbox (javascript)
All that remains is to define two javascript functions - lunchboxOpen() and lunchboxClose() - which can be either in the <head> area of your HTML page, or in a separate javascript file:function lunchboxOpen(lunchID) { document.getElementById('lunch_' + lunchID).style.display = "block"; document.getElementById('clasp_' + lunchID).innerHTML="<a href="/" mce_href="/""javascript:lunchboxClose('" + lunchID + "');/">Close Lunchbox " + lunchID + "...</a>"; } function lunchboxClose(lunchID) { document.getElementById('lunch_' + lunchID).style.display = "none"; document.getElementById('clasp_' + lunchID).innerHTML="<a href="/" mce_href="/""javascript:lunchboxOpen('" + lunchID + "');/">Open Lunchbox " + lunchID + "...</a>"; }
Because of lacking time , I didn't translate it into Chinese. But the sentences did not difficult for reading. Someday, I would have much spare time, and I will translate it then. Sorry.
If you want to see some examples of these codes, you can pay a visit to this address:
http://www.brenz.net/snippets/open_close_div.asp
相关文章推荐
- Jquery实现的一个DIV层面板的折叠/展开效果
- JS实现固定在右下角可展开收缩DIV层的方法
- 向右收缩和展开div(2)
- html div展开收缩 js 代码
- vuejs实现折叠面板展开收缩动画效果
- java 中实现象开发环境中那样,需要某些面板时点击展开,不需要时点击让其收缩
- div展开收缩代码
- jq div鼠标放上、离开马上展开、收缩方法
- DIV结构的点击收缩展开左边栏代码(html+css+js)
- JS+CSS实现DIV层的展开、收缩效果
- div+css+js打造的一款菜单的收缩与展开代码
- html Div层的展开与收缩的特效源代码下载
- jQuery实现DIV层收缩展开的方法
- div+css+js实现菜单的收缩与展开
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- Jquery div展开收缩
- html Div层的展开与收缩的特效源代码下载
- jQuery实现DIV层收缩展开的方法
- C#使用splitContainer控件制作收缩展开面板