jquery滑动切换没有换行符

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

对于我的尝试，我使用了一个技巧来解决问题，但它不工作（当我点击“开始的句子”而不是“（...）”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(); 
}); 
});

来源

2013-06-22 JinSnow

你可以试试这个脚本是非常简单基本的脚本可能会有所帮助给你。

jsfiddle.net/nZyXJ/

来源

2013-06-25 04:06:48 steve

感谢您的帮助史蒂夫！是的，这非常有帮助！我试过你的代码，它的工作正常，但我试图解决你的代码来获取代码，让我显示不同长度的“句首”（如替换var showChar = 100;通过“阅读更多”句子），但没有成功。当“句尾”出现时，我也试图添加一种缓慢的切换效果，但它也没有成功！ – JinSnow

你可以查看这个http://jsfiddle.net/nZyXJ/1/ – steve

我很抱歉，我读了我的评论，而且根本不清楚。 var showChar = 100不能用于我的情况，因为我有时需要在100个字符之后开始我的切换，但有时候它会是300.事实上，我甚至不知道字符的数量，因为我将开始切换在句子中最好的地方，所以它可以在3个单词之后或50个单词之后。我无法预测切换的位置，所以jquery必须反映这种灵活性。再次，我很抱歉，我的坏。 – JinSnow

从史蒂夫上面的提琴是我用过的，直到我发现文本被以非常奇怪的方式被切断。当您点击“更多”链接时，文字显示不正确。所有你需要做的就是将更多的功能更改为以下内容：

$('.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-30 11:27:26

jquery滑动切换没有换行符

回答

相关问题