• 永兴集团(中国区)官方网站-Macau App Station

    网站建设资讯详细

    网站前端制作之点击展开更多效果

    发表日期:2022-08-03 16:22:41   作者来源:林志平   浏览:1918   标签:网站前端制作    
    点击展开更多
    第一种是底部导航栏下拉展示更多,默认显示n个,超出n个则隐藏,点击more展示更多,效果如下图所示:
     

    效果

    Html:

    Js:
    $(function(){
    var hide=$('.special ul li:gt(1)');
    $(hide).hide();
    var btn=$('.more_btn span');
    $(btn).click(function(){
    if($(hide).is(":visible")){
    $(hide).hide();
    $(this).css("background-image",'url(images/img141.png)').text('More');
    }else{
    $(hide).show();
    $(this).css({'background-image':'url(images/img141a.png)'}).text("Hide");
    }
    return false;
    })
    })
    这其中用到了:gt() 选择器,这里是选择前2个之后的所有 li元素使其隐藏。:gt(index) index的值从0开始。
    第二种是展示折叠更多内容文字,可以将长长的文字按照要求进行折叠展示,效果如下图所示:
     
    效果

    Html:



    • 先生


      1968年8月出生,中国国籍,无境外永久居留权,大专学历,中国注册会计师。

      1988年7月至1998年4月,历任医药保健品进出口公司财务科会计、科长;1998年5月1999年1月,任高科技有限公司财务总监;2000年至今,任医疗用品股份有限公司董事、副总经理、首席财务官



      展开详情+





    • 女士


      1968年8月出生,中国国籍,无境外永久居留权,大专学历,中国注册会计师。

      1988年7月至1998年4月,历任医药保健品进出口公司财务科会计、科长;1998年5月1999年1月,任高科技有限公司财务总监;2000年至今,任医疗用品股份有限公司董事、副总经理、首席财务官1968年8月出生,中国国籍,无境外永久居留权,大专学历,中国注册会计师。

      1988年7月至1998年4月,历任医药保健品进出口公司财务科会计、科长;1998年5月1999年1月,任高科技有限公司财务总监;2000年至今,任医疗用品股份有限公司董事、副总经理、首席财务官



      展开详情+





    Js:
    $(function(){
    $(".introduction ul li").click(function () {
    var hei = $(this).find('.sp').height();
    if($(this).hasClass('on')){
    $(this).removeClass('on');
    $(this).find('.mbtn').html("展开详情+");
    $(this).find('.txt').css({
    'height':'56px', 'transition-duration':'400ms'
    });
    }else {
    $(this).addClass('on');
    $(this).find('.mbtn').html("收起");
    $(this).find('.txt').css({
    'height': hei , 'transition-duration':'400ms'
    });
    }
    });
    })
    如没特殊注明,文章均为永兴集团原创,转载请注明来自/news/6497.html
    XML 地图