2

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

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

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

2 回答 2

1

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

  jsfiddle.net/nZyXJ/
于 2013-06-25T04:06:48.717 回答
0

上面史蒂夫的小提琴是我使用的，直到我发现文本以一种非常奇怪的方式被切断。当您单击“更多”链接时，文本显示不正确。您所要做的就是将 .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);
    }
});

我将其发布为答案只是因为我无法发表评论。

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

于 2014-12-30T11:27:26.300 回答