原來樣子：

點選更多之後：

點選這個框之外的所有元素，都恢復成之前那樣。

程式碼如下：記得引入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;