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();
});

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

Nulla varius diam at sem adipiscing pharetra。整数eget nulla non purus commodo aliquam。 Aenean sed nunc neque。 Aliquam eleifend aliquam arcu，ac semper nulla faucibus ... 显示

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

Answer 1

您只需将display元素的.container属性设置为inline即可。

http://jsfiddle.net/Nh4K2/2/

更新了小提琴

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

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>

至少我正在阅读你的问题和发布的代码。

总是在段落的末尾创建展开按钮

3 个答案: