jquery幻灯片切换没有换行符答案

【问题标题】：jquery slide toggle without line breakjquery幻灯片切换没有换行符
【发布时间】：2013-06-22 16:24:33
【问题描述】：

我正在为我的 Joomla! 寻找一个滑动切换的 jQuery！可以像this example 一样工作的网站：我希望我的文章以句子开头，然后是（阅读更多）。单击（阅读更多）将隐藏（阅读更多）并显示句子的结尾（没有换行符，甚至没有空格）。并且在整个句子的末尾，一个“关闭”链接。

为了我的尝试，我使用了一个技巧来解决这个问题，但它不起作用（当我点击“句子的开头”而不是“（...）”时，工具隐藏了我的所有内容joomla 文章（即便如此它仍然有效here）

HTML：

<ul id="containertoggle">
    <li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a>
        <div style="display: none;">
            <p>This is the beginning of the sentence and this is the end of the sentence </p>
        </div></li>
    <li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a>
        <div style="display: none;">
            <p>This is the beginning of the sentence and this is the end of the sentence </p>
        </div></li></ul>

查询

var $j = jQuery.noConflict();
$j(function () {
$j('#containertoggle').on('click', 'a.opener', function () {
     $j(this).next().toggle('slow').find('p').append('<span>[close]</span>');
     $j(this).hide();
 });
 $j('#containertoggle').on('click', 'span', function () {
     $j(this).closest('div').toggle('slow').closest('li').find('a').show();
     $j(this).remove();
 });
});

【问题讨论】：

标签： jquery joomla slidetoggle article

【解决方案1】：

你可以试试这个脚本它很简单很基本的脚本可能对你有帮助。

  jsfiddle.net/nZyXJ/

【讨论】：

感谢史蒂夫的帮助！是的，它非常有帮助！我试过你的代码，它工作正常，但我试图解决你的代码以获得一个代码，让我为“句子的开头”显示不同的长度（比如用“阅读更多”替换 var showChar = 100;句）但没有成功。我还尝试在出现“句末”时添加一种慢速切换效果，但也没有成功！
很抱歉，我阅读了我的评论，但一点都不清楚。 var showChar = 100 不适用于我的情况，因为有时我需要在 100 个字符后开始切换，但有时会是 300。实际上，我什至不知道字符数，因为我将在句子中最好的位置，所以它可能在 3 个单词之后或 50 个单词之后。我无法预测切换的位置，因此 jquery 必须反映这种灵活性。再次，对不起，我的错。

【解决方案2】：

上面史蒂夫的小提琴是我使用的，直到我发现文本以一种非常奇怪的方式被切断。当您单击“更多”链接时，文本显示不正确。您所要做的就是将 .more 函数更改为以下内容：

$('.more').each(function () {
    var content = $(this).html();
    if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);
        var html = c + '<span class="moreelipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
        $(this).html(html);
    }
});

我发布这个作为答案仅仅是因为我不能发布 cmets。

事实上，我现在一起使用另一个脚本，来自https://stackoverflow.com/a/11417877/3842368。我发现这个在多种情况下效果更好。

【讨论】：