Question

我正在为我的Joomla寻找一个幻灯片切换jQuery！将在this example中工作的网站：我希望我的文章从句子的开头开始，然后是（阅读更多）。单击（read-more）将隐藏（read-more）并显示句子的结尾（没有换行符，甚至是空格）。在完整句子的末尾，是一个“关闭”链接。

对于我的尝试，我使用了一个技巧来解决问题，但它不起作用（当我点击“句子的开头”而不是“（...）”toogle隐藏我的所有内容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>

QUERY

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

Answer 1

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

  jsfiddle.net/nZyXJ/

Answer 2

史蒂夫上面的小提琴就是我用过的小提琴，直到我发现文字被一种非常奇怪的方式切断了。点击＆＃39;更多＆＃39;链接，文本显示不正确。您所要做的就是将.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。我发现这个可以在多个实例中更好地工作。

jquery幻灯片切换没有换行符

2 个答案: