Question

我正在尝试在Textarea中创建readmore选项。

这里我可以用div来做，但是当我用textarea替换div时，它只显示textarea中没有reamore选项的整个内容。

<body>
  <div class="container">  
    <h1>Demo</h1>
    <section id="demo">    
        <div>      
             <art>
            <div>
        <h2>Artisanal Narwahls</h2>
        <p>Salvia portland leggings banh mi fanny pack mixtape, authentic bushwick wes anderson intelligentsia artisan typewriter high life they sold out mixtape high life. Marfa ethnic wayfarers brooklyn keytar mixtape. Blue bottle shoreditch gluten-free, mixtape hoodie whatever pinterest viral twee fashion axe high life irony biodiesel tofu.</p>
        </div>    

         </art>
        </div>        
    </section>
  </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="readmore.js"></script>
<script>
  $('#info').readmore({
    moreLink: '<a href="#">More examples and options</a>',
    maxHeight: 190,
    afterToggle: function(trigger, element, more) {
      if(! more) { // The "Close" link was clicked
        $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
      }
    }
  });

    $('art').readmore({maxHeight: 240});
  </script>

</body>

这是我的小提琴。：http://jsfiddle.net/VSscB/

但是在小提琴中它虽然与我的页面中的代码和脚本相同，却没有给出readmore选项。

Answer 1

你还没有在jsFiddle中加载jQuery ..你可以从“框架和扩展”下拉菜单中选择jQuery ..你的代码工作得很好...... working link 也..

（function（$）{...}}）（jQuery）;

应该在......之前。

$('#info').readmore({...});

因为与您在问题中发布的标记不同.. readmore插件是在$（'＃info'）之后加载的.readmore（{}）;函数在jsFiddle ..所以你会得到一个错误..检查你的控制台..

虽然..你不能'使用textarea ..如果你只是想编辑内容......你可以将contenteditable属性设置为true ...检查。 readmore.js插件..我发现这可以通过......完成。

 $('.readmore-js-section').attr("contenteditable","true") ;

updated link

在textarea中添加read more选项

1 个答案: