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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!