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()
  })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值