0

我在这里有点麻烦。解决方案很简单，但直到现在才知道点击。我有一个文本区域要由用户使用 ckeditor 填充。如果文本太长，我会在渲染之前使用 php 拆分内容，我会使用 jquery 切换效果添加查看/隐藏更多操作。一个小的解决方法可能是：

如果文本是

Appropriate length text here.Other hidden texts here.

这将是

<div class="show always">Appropriate length text here.</div>
<div class="togglehidden1">See more</div>
<div class="hidefirst" style="display:none">Other hidden texts here.</div>
<div class="togglehidden2" style="display:none">Hide more</div>

但这里的交易是 ckeditor 实际上在这里放了很多 html 的东西，实际上我们收到的字符串是完全不可想象的。例如：

<div><p><b>Appropriate</b> length text here.</p></div><div>Other hidden texts here.</div>

使用相同的方法拆分并插入一些查看更多操作

<div class="show always"><div><p><b>Appropriate</b> length</div>
<div class="togglehidden1">See more</div>
<div class="hidefirst" style="display:none">here.</p></div><div>Other hidden texts here.</div></div>
<div class="togglehidden2" style="display:none">Hide more</div>

所以，只有这个 div 是隐藏的

<div class="hidefirst" style="display:none">here.</p></div>

并且这里的这一部分被留下了。

<div>Other hidden texts here.</div></div>

请建议。我做错了吗？

4

1 回答 1

0

这是一个工作小提琴。

HTML代码_

<div class="show always">
    <div><p><b>Appropriate</b> length here.</p>
        <div class="togglehidden">See more</div>
    </div>
</div>
<div class="hidefirst">
    <div>Other hidden texts here.</div>
</div>

jQuery代码（使用slideToggle ()创建动画）

$(document).ready(function() {
    //hide the content when the document is ready
    $('.hidefirst').hide();
    //on clicking the See more/Hide More toggle the visible state of element
    $('.togglehidden').bind('click', function() {
        $('.hidefirst').slideToggle(function() {
            // if element is visible change the text to Hide more
            if ($(this).is(':visible'))
                $('.togglehidden').html('Hide more');
            // else change the text do See more
            else
                $('.togglehidden').html('See more'); 
        });
    });
});
  1. 将点击事件绑定到.togglehidden类
  2. 使用 slideToggle() 显示/隐藏.hidefirst的内容
  3. 在 slideToogle 回调中检查内容是否可见并设置适当的消息。

希望能帮助到你。

于 2013-04-02T12:50:15.897 回答