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/

現在，如果您還希望發生某種動畫，則可能需要在此過程中進行一些測量。