Question

我在html元素中有很多单词我希望显示4到5个单词并在点击更多链接时隐藏所有单词所有单词将显示我如何使用javascript执行此操作这里是我的HTML代码

<dd id="hide_actors">
    <a rel="tag" href="http://link.com/archives/actors/archie-adamos">Archie Adamos</a>, 
    <a rel="tag" href="http://link.com/archives/actors/brad-johnson">Brad Johnson</a>, 
    <a rel="tag" href="http://link.com/archives/actors/eric-hahn">Eric Hahn</a>, 
    <a rel="tag" href="http://link.com/archives/actors/frederick-bailey">Frederick Bailey</a>, 
    <a rel="tag" href="http://link.com/archives/actors/jeff-griffith">Jeff Griffith</a>, 
    <a rel="tag" href="http://link.com/archives/actors/jesse-metcalfe">Jesse Metcalfe</a>, 
    <a rel="tag" href="http://link.com/archives/actors/josie-bissett">Josie Bissett</a>, 
    <a rel="tag" href="http://link.com/archives/actors/keegan-connor-tracy">Keegan Connor Tracy</a>, 
    <a rel="tag" href="http://link.com/archives/actors/ken-metcalfe">Ken Metcalfe</a>, 
    <a rel="tag" href="http://link.com/archives/actors/mark-venturini">Mark Venturini</a>, 
    <a rel="tag" href="http://link.com/archives/actors/matthew-settle">Matthew Settle</a>, 
    <a rel="tag" href="http://link.com/archives/actors/meghan-ory">Meghan Ory</a>, 
    <a rel="tag" href="http://link.com/archives/actors/rick-dean">Rick Dean</a>, 
    <a rel="tag" href="http://link.com/archives/actors/romy-diaz">Romy Diaz</a>, 
    <a rel="tag" href="http://link.com/archives/actors/ruben-ramos">Ruben Ramos</a>, 
    <a rel="tag" href="http://link.com/archives/actors/vernon-wells">Vernon Wells</a>, 
    <a rel="tag" href="http://link.com/archives/actors/virginia-madsen">Virginia Madsen</a>
</dd>

Answer 1

使用

<强> CSS

#hide_actors{
    display:none;
}

<强>的Javascript

$(function(){
    $('#show').click(function(){
     $('#hide_actors').show('slow');
    });
});

FIDDLE DEMO

Answer 2

试试这个

添加新锚点以加载更多

<a href="javascript:;" id="loadmore">Load more</a>

<强>脚本

    $(function(){
        $('#hide_actors').find('a').each(function(index,item){
            if(index>3){
               $(item).hide();    
               $(item).next('span').hide();   
            }
        })
       $('#loadmore').click(function(){
            $('#hide_actors a').each(function(index,item){
               $(item).show();    
               $(item).next('span').show('slow');   
            })
            $('#loadmore').hide();
       });
   });

Working demo

如何在javascript中创建更多简单加载

2 个答案: