点击更多文字，显示更多文字样式。再次点击更多文字之外的元素任意某处，变回原来样式

原来样子：

点击更多之后：

点击这个框之外的所有元素，都恢复成之前那样。

代码如下：记得引入jq文件

<div class="swiper-slide am-margin-bottom-lg">
    <div class="am-margin-bottom-xl border-shadow ">
        <img alt="Shanghai Jie Yi information technology" style="width: 100%;height:180px;" src="{$v[thumb]}" width="640" height="100"/>
        <div class="big" class="am-padding-xl " style="padding:48px">
            <h4 class="am-text-lg am-text-center">
                {$v[title_e]}
            </h4>
            <p style="width:100%;height:120px;" class="more-p">
                {str_cut(strip_tags($v[description_e]),257,'...<a style="margin-left:20px;color:blue;" class="more" >more</a>')}
            </p>
            <p style="display:none;width:100%;height:240px;" class="more-word">
                {strip_tags($v['description_e'])}
            </p>
        </div>
    </div>
</div>

<script>
    var obj;
    var flag=false;
    $('.more').click(function(){
        obj=$(this).parents('.big');
        $(this).parent('.more-p').css('display','none');
        $(this).parent().next().css('display','block');
        obj.bind('mouseleave',function(){
            flag=true;
        })

        obj.bind('mouseenter',function(){
            flag=false;
        })
        document.onmousedown=function(event){
            if(flag){
                obj.find('.more').parent('.more-p').css('display','block');
                obj.find('.more').parent().next().css('display','none');
                obj.unbind('mouseleave').unbind('mouseenter');

		flag=false;
            }        }    });</script>