javascript - 始终在段落末尾添加展开按钮

Question

这是在线示例：http: //jsfiddle.net/Nh4K2/

<div class="container">
    Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus id. Etiam luctus eleifend tempus. Vestibulum ornare, nisi vitae fermentum luctus, sem lectus rhoncus nibh, auctor iaculis magna turpis nec turpis. Aliquam orci tortor, vulputate at pretium sit amet, blandit eget libero. Sed posuere ultricies mi, sed rhoncus massa ultrices quis. Donec pulvinar vestibulum rhoncus. Donec urna lacus, mollis et convallis at, commodo nec lectus. Maecenas pretium, nunc ac volutpat tempus, dolor orci ultricies massa, eu malesuada urna massa ut orci. Duis eget elit nulla, ornare aliquet nulla. Sed eleifend scelerisque est, eu laoreet lacus ultricies id. Aenean aliquam porttitor augue, quis lacinia augue consequat vitae. Ut venenatis orci massa. Duis dignissim, justo at pellentesque adipiscing, ligula eros mollis tellus, ut accumsan lorem dui eu est.
        <div class="whatever">hahahahahaha</div>
    <div class="damn">hohohohohohoho</div>
    <div class="laugh">lololololololololo</div>
</div>
<span>Show</span>​

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length - 1);
    return words.join(' ') + '&hellip;';
}

var $div = $('.container');
$div.each(function() {
    var theExcerpt = excerpt($(this).text(), 30);
    $(this).data('html', $(this).html()).html( theExcerpt );
});

$('span').click(function() {
    var isHidden = $(this).text() == 'Show';
    var $div = $(this).prev();
    var theExcerpt = excerpt($div.text(), 30);
    $div.html( isHidden ? $div.data('html') : theExcerpt);
    $(this).remove();
});​

任何可能的方法使“显示”切换按钮始终显示在段落的末尾？而不是显示在第二行，格式看起来像

sem adipiscing pharetra 处的 Nulla varius diam。整数 eget nulla non purus commodo aliquam。Aenean sed nunc neque。Aliquam eleifend aliquam arcu, ac semper nulla faucibus…<strong>显示

非常感谢任何建议或解决方案。

Answer 1

您可以简单地将元素的display属性设置为..containerinline

在http://jsfiddle.net/Nh4K2/2/更新小提琴

如果您希望它们被阻止，您可以在两者周围添加一个包装器 div.container和<span>.

Answer 2

将跨度添加到函数中的摘录中。

确保选择跨度parent()而不是它的prev().

http://jsfiddle.net/Nh4K2/3/

<div class="container">
    Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus id. Etiam luctus eleifend tempus. Vestibulum ornare, nisi vitae fermentum luctus, sem lectus rhoncus nibh, auctor iaculis magna turpis nec turpis. Aliquam orci tortor, vulputate at pretium sit amet, blandit eget libero. Sed posuere ultricies mi, sed rhoncus massa ultrices quis. Donec pulvinar vestibulum rhoncus. Donec urna lacus, mollis et convallis at, commodo nec lectus. Maecenas pretium, nunc ac volutpat tempus, dolor orci ultricies massa, eu malesuada urna massa ut orci. Duis eget elit nulla, ornare aliquet nulla. Sed eleifend scelerisque est, eu laoreet lacus ultricies id. Aenean aliquam porttitor augue, quis lacinia augue consequat vitae. Ut venenatis orci massa. Duis dignissim, justo at pellentesque adipiscing, ligula eros mollis tellus, ut accumsan lorem dui eu est.
        <div class="whatever">hahahahahaha</div>
    <div class="damn">hohohohohohoho</div>
    <div class="laugh">lololololololololo</div>
</div>
​

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length - 1);
    return words.join(' ') + '&hellip;' + '<span>Show</span>';
}

var $div = $('.container');
$div.each(function() {
    var theExcerpt = excerpt($(this).text(), 30);
    $(this).data('html', $(this).html()).html( theExcerpt);
});

$('span').click(function() {
    var isHidden = $(this).text() == 'Show';
    var $div = $(this).parent();
    var theExcerpt = excerpt($div.text(), 30);
    $div.html( isHidden ? $div.data('html') : theExcerpt);
    $(this).remove();
});​

Answer 3

您的 HTML 结构很差，我会这样布置：

<div class="container">
    <div class="description_text">
        <span>description_text_here</span>
        <span class="show_more"> Show</span>
    </div>
    <div class="more_text_to_show">
        <p>more_text_to_show_here</p>
    </div>
</div>

至少这就是我正在阅读您的问题和发布的代码的内容。