Javascript Smarty-我如何添加“；“显示更多链接”选项卡；

如何在显示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}

{if$listing_styles.links}
{foreach from=$thisSpidence.embeddes key=id item=val name=titles}
{$embed_语言[$val.lang].language}
{如果$val.type}-
{/if}

{if$val.link}
{if$global_settings.adfly.id}


{else}


{/if}
{/if}

{/foreach}
{/if}

查看此插件。非常适合您想要做的事情：

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

基本上，下载并添加对页面上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}

{literal}
jQuery（函数（）{
jQuery（“#链接列表”）。阅读更多({
速度：75，
折叠高度：400，
lessLink:'
});
});
{/literal}

---

查看插件选项以获得对插件的更多控制。

尝试不工作我希望smarty模板引擎使用它上面的代码是smarty。是否将链接列表div传递到readmore插件中？如果你仍然无法让它工作，发布你想要插件使用的页面源代码。不是smarty代码，而是实际输出的HTML。检查那里我只想显示10个链接其余的应该隐藏在显示更多@garethbi在我的标题中添加了对readmore.js的引用。tpl还添加了

$（function（）{$（'#link_list'）。readmore（{speed:75，collapsedHeight:400 lessLink:'}）；}）但在该页面加载后，它将完全变为空白@garethb也许它不能与smarty一起工作？对于smarty，您需要将javascript封装在{literal}中，请参阅更新的答案。另外，$在Smarty中是一个特殊字符，因此需要改用jQuery。在添加对readmore.js的引用时，请确保它也包装在{literal}中。如果您还没有引用jquery，还可以在对readmore.js的引用之上添加对jquery的引用。有关在Smarty中包含javascript的更多帮助，请参阅。