Maison > interface Web > tutoriel HTML > 请问一个关于div滚动条的问题_html/css_WEB-ITnose

请问一个关于div滚动条的问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:39:56
original
1617 Les gens l'ont consulté

代码如下:
nbsp;html>


    
    <script></script>
    CDOS Mail
    


<script> <br /> $(document).ready(function() { <br /> $(".newfolder").show(); <br /> $(".rcvfold").click(function(){ <br /> $('.newfolder').slideToggle(500); <br /> }) <br /> }); <br /> </script>

    
欢迎新用户

    
收件箱

    

        
test1

        
test2

        
test3

        
test4

        
test5

        
test1

        
test2

        
test3

        
test4

        
test5

        
test1

    

    

testaaaaaasdasdasdasdsdas1234567890123456789012345678901234567890123456789012345678901234567890


    

testaaaaaasdasdasdasdsdas


    

testaaaaaasdasdasdasdsdas


    

testaaaaaasdasdasdasdsdas


    

testaaaaaasdasdasdasdsdas






在一个div里创建一个div,外层div有个按钮,点击实现展开/收回内层div内容的功能, 本来要实现的效果是:内层div设置一定大小假如能显示4行内容 test1~4 ,如果还有内容就出现滚动条..

现在的问题是如果加上第一句nbsp;html>,内层div在竖直方向是无法出现滚动条的,但是水平方向无影响.假如内容过多就会跑到页面下面无法查看.   

假如注销第一句nbsp;html>后内层div可以出现滚动条,但是点击收缩的时候内层div内容收缩了但是边框一直还在


请问怎么修改可以实线这两种情况的结合,就是点击按钮实线下拉,然后出现滚动条,再次点击按钮div整体上拉,谢谢


回复讨论(解决方案)

注释第一句后展开效果:

$(document).ready(function() {        $("#innerOne .newfolder").show();        $(".rcvfold").click(function(){                 $('#innerOne').slideToggle(500);        })    });
Copier après la connexion
Copier après la connexion

你这里改成这样,然后你把#innerOne的高度设置成固定高度

$(document).ready(function() {        $("#innerOne .newfolder").show();        $(".rcvfold").click(function(){                 $('#innerOne').slideToggle(500);        })    });
Copier après la connexion
Copier après la connexion

你这里改成这样,然后你把#innerOne的高度设置成固定高度



非常感谢
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal