Javascript显示/隐藏-我不希望它隐藏整个元素

Question

这可能是一个相当简单的问题，但是我是JavaScript和jquery的新手。

我有一个带有基本显示/隐藏切换的网站。 我正在使用的show / hide功能在这里： http : //andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

所以这是我的问题.....我真的希望切换部分的前5-10个字始终可见。 有什么办法可以更改它，以便它不隐藏整个元素，而是隐藏除元素的前几个单词以外的所有单词？

这是我想要执行的操作的屏幕截图： http : //answers.alchemycs.com/mobile/images/capture.jpg

Answer 1

有许多不同的实现可能性：

1. 您可以将内容分为第一部分和第二部分（主对象内的两个单独的span或div），并且仅隐藏代表第二部分的子对象，而不隐藏父对象。
2. 您可以将其高度设置为仅显示第一部分（而不是完全隐藏对象）（溢出：隐藏）
3. 将主对象的内容更改为仅将第一部分作为内容（要求您将其他内容保留在其他位置，以便在再次展开时可以将其还原）。

这是选项1的工作示例： http : //jsfiddle.net/jfriend00/CTzsP/ 。

Answer 2

您需要：

• 放入跨度/等。 在前n个单词之后，并且仅隐藏该部分，或者
• 更改可见区域，或
• 替换或切换跨度/等。 与“折叠”视图。

最后一个更具可定制性。 使用两个单独的元素可以进行琐碎的游戏（例如，显示图像，例如，一个小的卷曲箭头），而无需修改添加/删除DOM元素。

我倾向于最后一种方法，因为它简单明了，但这是个人喜好，实际上并不像过去那样正确。

Answer 3

您可以进行一些插件创作 ，根据您的屏幕截图，我在此处做了一个示例演示

<div class="toggle">ShowHide</div>
<div class="content">some content some content  some content  some content  some content <br/> some content  some content  some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content  some content  some content  some content <br/> some content  some content  some content </div>

这是javascript / jquery代码

jQuery.fn.myToggle = function(selector, count) {
    var methods = {
        toggle: function(selector, count) {
            if ($(selector).is(':visible')) {
                var span = $('<span>');
                span.text($(selector).text().substr(0, count) + "...");
                span.insertAfter($(selector));
                $(selector).hide();
            }
            else {
                $(selector).show();
                $(selector).next('span').hide();
            }
        }
    };
    $(this).each(function() {
        methods.toggle($(this).next(selector), count);
        $(this).click(function(evt) {
            methods.toggle($(this).next(selector), count);
        });
    });
};
$(function() {
    $('.toggle').myToggle('.content', 3);
});

Answer 4

这是仅使用css属性而不是破坏dom的解决方案。

http://jsfiddle.net/AYre3/4/

现在，如果您还希望发生某种动画，则可能需要在此过程中进行一些测量。