jquery 滑动切换不换行

Question

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

对于我的尝试，我使用了一个技巧来解决这个问题，但它不起作用(当我单击“句子开头”而不是“(...)”时，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>

查询

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/