如何向下滑动部分元素

Question

我有一个带背景图片的部分，我的图片高度为900px我想在该部分显示我的部分文字作为示例600 character，当用户点击 SEE MORE <时/ em>它获取SlideDown显示所有文本。

我想到的一个想法是，如果文本长度超过600，则put仍然属于＆＃39;`然后隐藏它，当用户点击SEE MORE I SlideDown Span时。 实现这一目标的最佳解决方案是什么？

＆＃13;

＆＃13;

 section.requirement {
    background: rgba(0, 0, 0, 0) url("/themes/gttc_2016/images/requerment_bg.jpg") no-repeat scroll 50% 0 / cover ;
    color: #fff;
    min-height: 600px;
    padding: 0 10% 50px;
}

＆＃13;

<section class="requirement text-center">
            <h2 class="label-titr">Prerequisites and Requirements</h2>
            <div class="whybuild">
                <div> <p>General Requirements:</p>

<ul>
	<li>You are self-driven and motivated to learn. Participation in this program requires consistently meeting the deadlines set for your cohort and devoting at least 10 hours per week to your work.</li>
	<li>You are willing to contribute to the success of the program, including collaborating with fellow students and giving us feedback on how we can improve.</li>
</ul>

<p>Front-End Developer&nbsp;Specific Requirements:</p>

<ul>
	<li>You can independently solve and describe your solution to a math or programming problem</li>
	<li>You have access to 
                </li></ul>

                    a computer with a broadband connection, on which you’ll install a professional code/text editor (<a href="http://www.sublimetext.com/">Sublime Text</a>&nbsp;or&nbsp;<a href="https://atom.io/">Atom</a>).
	<li>You are familiar with&nbsp;<a href="https://docs.webplatform.org/wiki/tutorials/Programming_-_the_real_basics">basic programming concepts</a>&nbsp;such as variables, conditions and loops.</li>



                </div>
        </section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<style>
    #content {
        height: 50px;
        overflow: hidden;
    }

    #content.open {
        height: auto;
    }
</style>

<script>
    function seeMore(){
        $('#content').addClass('open');
    }   
</script>

<div id="content">
    Your content...
</div>

<input type="button" onClick="seeMore();" value="SEE MORE" />

Answer 2

您可以在 section.requirement 中添加 max-heigth，overflow：hidden 。并使用css max-height：auto

写 section.requirement.open

点击查看更多按钮时，您可以使用jquery toggleClass（“打开”）

Answer 3

您可以简单地使用动画jQuery和切换。 的被修改

$(document).ready(function(){
    $(".click").click(function(){
        $(".hide").animate({
            height: 'toggle'
        });
    });
});

.hide{
  display:none;
}
.requirement{    
  
    background: url(http://gttcenter.com/themes/gttc_2016/images/requerment_bg.jpg);
    color: #fff;
    padding: 25px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="requirement text-center">
            <h2 class="label-titr">Prerequisites and Requirements</h2>
            <div class="whybuild">
                <div> <p>General Requirements:</p>

<ul>
	<li>You are self-driven and motivated to learn. Participation in this program requires consistently meeting the deadlines set for your cohort and devoting at least 10 hours per week to your work.</li>
	<li>You are willing to contribute to the success of the program, including collaborating with fellow students and giving us feedback on how we can improve.</li>
</ul>

<p>Front-End Developer&nbsp;Specific Requirements:</p>
<p class="click">
See More
</p>
<div class="hide">


<ul>
	<li>You can independently solve and describe your solution to a math or programming problem</li>
	<li>You have access to 
                </li></ul>

                    a computer with a broadband connection, on which you’ll install a professional code/text editor (<a href="http://www.sublimetext.com/">Sublime Text</a>&nbsp;or&nbsp;<a href="https://atom.io/">Atom</a>).
	<li>You are familiar with&nbsp;<a href="https://docs.webplatform.org/wiki/tutorials/Programming_-_the_real_basics">basic programming concepts</a>&nbsp;such as variables, conditions and loops.</li>



                </div>
                </div>
        </section>