2 sxd0208 Sxd0208 于 2016.04.01 17:12 提问

如何在页面上实现收起展开的效果

如何在页面上实现收起展开的效果 如图图片说明图片说明

9个回答

showbo
showbo   Ds   Rxr 2016.04.01 17:21
已采纳

<script>
    function toggle(id,exp) {
        document.getElementById(id).style.display =exp?'block':'none';
        document.getElementById('a' + id).style.display = exp ? 'none' : 'inline';
    }
</script>
<a href="javascript:toggle('detail',true)" id="adetail">展开1</a><br />
<div id="detail" style="display:none">
    详细内容1。。。。。。。
    <div style="text-align:right"><a href="javascript:toggle('detail')">收起</a></div>
</div>
<a href="javascript:toggle('detail1',true)" id="adetail1">展开2</a><br />
<div id="detail1" style="display:none">
    详细内容2。。。。。。。
    <div style="text-align:right"><a href="javascript:toggle('detail1')">收起</a></div>
</div>
wuyt2008
wuyt2008   2016.04.01 17:19

用jquery UI的Accordion就好了。
http://jqueryui.com/accordion/

qq_21717735
qq_21717735   2016.04.01 17:18

这两个div把内容都放里面,点击时切换

u012216727
u012216727   Ds   Rxr 2016.04.01 17:20

用js实现一个方法,在方法里用div+CSS实现的。
在js方法里判断,如果当前状态为1,则显示下面的内容.
如果为0,则将它们隐藏就行了。

CSDNXIAON
CSDNXIAON   2016.04.01 17:22

文章收起与展开效果的实现
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

lml_little
lml_little   2016.04.01 18:03

用JQ



收起展开
测试

<br> ul {<br> padding: 0px;<br> margin: 0px;<br> }<br> ul li div {<br> display: none;<br> }<br>




  • 网站运营



    1.dfdjskhfdjkshf

    展开


  • 网站运营



    2.dfdjskhfdjkshf

    展开


<br> $(&#39;#show li a&#39;).click(function(){<br> $(this).prev().toggle();<br> })<br>


lml_little
lml_little   2016.04.01 18:04
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>收起展开</title>
        <title>测试</title>
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <style>
            ul {
            padding: 0px;
            margin: 0px;
            }
            ul li div {
                display: none;
            }
        </style>
    </head>
    <body>
        <ul id="show">
            <li>
                <h4>网站运营</h4>
                <div>
                    1.dfdjskhfdjkshf
                </div>
                <a href="#">展开</a>
            </li>
            <li>
                <h4>网站运营</h4>
                <div>
                    2.dfdjskhfdjkshf
                </div>
                <a href="#">展开</a>
            </li>
        </ul>
        <script>
            $('#show li a').click(function(){
                $(this).prev().toggle();
            })
        </script>
    </body>
</html>

AIRE_Talent
AIRE_Talent   2016.04.02 00:22

你可以尝试下BootStrap框架,基于jQuery实现的,非常方便就能实现了。

Xiaolong_wise
Xiaolong_wise   2016.04.04 09:24

用jquery中的slideUp()或者slideDown()或者slideToggle()实现

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html页面内容的收缩和展开效果
html页面内容的收缩和展开效果 常见的网页中,会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果,新闻的内容只显示少数的一部分,然后后面会跟一个展开的链接,点击这个链接才会显示全部的新闻内容。 1、收缩情况下显示内容效果 2、点开之后显示的内容效果 3、实现的代码如下: Title h3
axure实现搜索条件的收起/展开
效果如图: 步骤: 1、先摆放好基本元件,包括条件1,条件2的输入框; 2、设置动态面板“按钮”,状态分别为展开/收起,并在相应状态下设置按钮的形状和文字,并设置动态面板载入时,设置“按钮”状态为“展开”。 3、设置动态面板“更多条件”,只有一个状态,显示为更多的查询条件。 4、设置“按钮-展开”onclck操作,显示“更多条件”,推动元件。相似地,设置“收起”操作,隐藏“更
h5 页面中内容的全部展示和收缩
这个页面主要展示如果一个页面中的内容特别多的时候,内容收缩展示部分内容,点击展示之后,显示所有的内容,点击收缩展示部分的内容。
文章收起与展开效果的实现
方式一(display) 方式二(substring)
Android文件展示-展开收起效果
思路: 1 view.setVisibility(View.VISIBLE)显示,view.setVisibility(View.GONE)或者view.setVisibility(View.INVISIBLE)隐藏。 2 Android的ExpandableListView 注: 参考地址1: http://wenwen.sogou.com/z/q437588459
JavaScript实现“展开-收起”效果
展开more收起fold JS var flag=false; var ShowOrHide =function(){ var divcontent=document.getElementById("hide_text"); var divmore=document.getElementById("changeState"); if(flag){
Axure折叠与展开效果的实现
http://www.masterchat.cn/article/20120501/217.html 视频教程 项目效果 点击表头,内容会展开或者收缩。 第一步,用矩形工具分别建立如下效果的图形 2,将内容部分(Section下边)转换成动态面板,分别命名为content-section1,content-section2,content-section3,分别为每个Section添加on
js 展开收起效果
js 展开收起效果 实现展开收起 function showOrHide(){  var obj_div = document.getElementById("tableList");  obj_div.style.display = (obj_div.style.display=='none')?'block':'none';  }
【HTML】- 实现展开与收起效果
javascript和jQuery分别实现实现展开与收起动画效果
jq 展开效果
jq收起展开效果,jq收起展开效果,jq收起展开效果,jq收起展开效果,jq收起展开效果,