php结合jq对数据的条数限制展示

在这里插入图片描述

点击更多出现剩下内容

当数据条数大于2时,显示更多
鼠标悬浮更多,显示剩下数据,更多不显示
离开数据框时,更多显示,数据框不显示

<!-- 活动标签 -->
                <div class='activity_tag'>
                   <?php $txt = '';  
                        if($res['activity_tags']!=[]){
    
    
                                $txt .= '<div class="activity_center activity">
                                <span class="activity_le">'.$res['activity_tags'][0]['activity_type'].'</span>
                                <span class="activity_nav">'.$res['activity_tags'][0]['activity_tag'].'</span>
                                <div class="activity_show"  onclick="activity_more()">
                                <span class="activity_details">详情</span>
                                <div class="activity_img"></div>
                                </div>
                                </div>';
                                $txt .= '<div class="activity_center activity">
                                <span class="activity_le">'.$res['activity_tags'][1]['activity_type'].'</span>
                                <span class="activity_nav">'.$res['activity_tags'][1]['activity_tag'].'</span>
                                <div class="activity_show"  onclick="activity_more()">
                                <span class="activity_details">详情</span>
                                <div class="activity_img"></div>
                                </div>
                                </div>';
                                if(array($res['activity_tags'])>2){
    
    
                                   $txt .= '<span class="more">更多</span>';
                                }
                    echo $txt; }?>
                    <div class="acitvity_Fram">
                    <?php $txt = '';  
                        if($res['activity_tags']!=[]){
    
    
                            foreach($res['activity_tags'] as $key=>$item){
    
     
                                if($key>1){
    
    
                                    $txt .= '<div class="activity_center">
                                    <span class="activity_le">'.$item['activity_type'].'</span>
                                    <span class="activity_nav">'.$item['activity_tag'].'</span>
                                    <div class="activity_show"  onclick="activity_more()">
                                    <span class="activity_details">详情</span>
                                    <div class="activity_img"></div>
                                    </div>
                                    </div>';
                                }
                            }
                    echo $txt; }?>
                    </div>
  $('.more').mouseenter(function () {
    
    
    $('.acitvity_Fram').show()
    $('.more').hide()
  })
  $('.acitvity_Fram').mouseleave(function () {
    
    
    $('.acitvity_Fram').hide()
    $('.activity').show()
  })

猜你喜欢

转载自blog.csdn.net/Sunshine_GirlXue/article/details/107833729