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

时间:2011-12-22 18:32:11

标签: javascript jquery

这可能是一个相当容易的问题,但我是JavaScript和jquery的新手....

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

所以这是我的问题.....我真的希望切换部分的前5-10个单词始终可见。有没有什么方法可以改变它,以便它不会隐藏整个元素,但隐藏了除元素的前几个单词之外的所有单词?

以下是我希望它做的截图: http://answers.alchemycs.com/mobile/images/capture.jpg

4 个答案:

答案 0 :(得分:4)

有许多不同的实施可能性:

  1. 您可以将内容分为第一部分和第二部分(主对象内部的两个单独的跨距或div),并仅隐藏代表第二部分的子对象,而不是隐藏父对象。
  2. 不是隐藏对象,而是可以将其高度设置为仅显示第一部分(溢出:隐藏)
  3. 将主对象的内容更改为仅将第一部分作为内容(要求您在其他地方保留完整内容,以便在再次展开时可以恢复它)。
  4. 以下是选项1的工作示例:http://jsfiddle.net/jfriend00/CTzsP/

答案 1 :(得分:2)

您需要:

  • 放入跨度/等。在第一个 n 之后,只隐藏那个部分,或
  • 更改可查看区域或
  • 替换或切换范围/等。与“崩溃”的观点。

最后一点是可定制的;使用两个单独的元素可以播放琐碎的游戏(显示图像,例如,像一个小的卷曲箭头),而无需修改添加/删除DOM元素。

我倾向于最后一个因为它简单而明显,但这是个人偏好,并且真的不像以前那样真实。

答案 2 :(得分:1)

您可以执行一些plugin authoring,我根据您的屏幕截图进行了示例演示here

<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);
});

答案 3 :(得分:0)

这是一个仅使用css属性而不是修改dom的解决方案。

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

现在,如果您想要某种动画发生,那么您可能需要在此过程中进行一些测量。