javascript - Smarty - 我如何添加 "show more links tab"

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，这里有一个 fiddle 展示了它与 readmore 插件的配合使用。我刚刚将完整的 readmore 代码复制到 fiddle 中，但您可能希望将其添加为引用 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}

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