Question

如何在显示10-15个链接而不是显示100-200个链接后添加“显示更多链接标签”？我想先显示10-15个链接，然后当有人点击时显示其余的隐藏链接以保存页面空间。

{if $listing_styles.links}
  <div id="link_list" {if $listing_styles.embeds}style="display:none"{/if}>
    {foreach from=$thisepisode.embeds key=id item=val name=titles}

      <div class="span-16 inner-16 notopmargin embed-selector" style="background: #F1F2F1 url('{$embed_languages[$val.lang].flag}') 15px 17px no-repeat;" onclick="changeEmbed({$val.id},{$global_settings.countdown});">

        <h5 class="left">
          {$embed_languages[$val.lang].language}
          {if $val.type} - 
            <a class="link" href="javascript:void(0);" {if $smarty.foreach.titles.first}class="current"{/if} id="selector{$val.id}"><span>{$val.type}</span></a>
          {/if}
        </h5>

        <ul id="filter" style="width:200px;float:right;margin-top: 0px;">
          {if $val.link}
            {if $global_settings.adfly.id}
              <li class="current" style="float:right">
                <a href="http://**f.ly/{$global_settings.**fly.id}/{$val.link|replace:"http://":""}" target="_blank">{$lang.open_video}</a>
              </li>
          {else}
              <li class="current" style="float:right">
                <a href="{$val.link}" target="_blank">{$lang.open_video}</a>
              </li>
            {/if}
          {/if}
        </ul>
      </div>

    {/foreach}
  </div>
{/if}

Answer 1

查看此插件。适用于您想要做的事情：

http://jedfoster.com/Readmore.js/

基于你的html，这里有一个小提示，显示这与readmore插件一起使用。我刚刚将完整的readmore代码复制到了小提琴中，但您可能希望将其添加为参考js文件（javascript中第8行的代码是插件代码）。

http://jsfiddle.net/6px7qso0/1/

基本上，下载并添加对页面上readmore.js文件的引用（从我在评论中发布的链接中获取github中的文件）。然后将以下代码添加到您的页面。

{literal}
<script type="text/javascript">
    jQuery(function(){
        jQuery('#link_list').readmore({
            speed: 75,
            collapsedHeight: 400,
            lessLink: '<a href="#">Read less</a>'
        });
    });
</script>    
{/literal}

查看插件选项，以便更好地控制插件。

Smarty - 如何添加“显示更多链接标签”

1 个答案: