首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Javascript显示/隐藏-我不希望它隐藏整个元素

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

Stack Overflow用户
提问于 2011-12-23 02:32:11
回答 4查看 120关注 0票数 0

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

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

所以我的问题是……我真的希望切换部分的前5-10个单词总是可见的。有没有什么办法可以让它不隐藏整个元素,而只隐藏元素的前几个单词?

下面是我希望它做的事情的屏幕截图:http://answers.alchemycs.com/mobile/images/capture.jpg

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-12-23 02:55:56

你可以做一些plugin authoring,我根据你的截图做了一个样例演示here

代码语言:javascript
复制
<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代码

代码语言:javascript
复制
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);
});
票数 1
EN

Stack Overflow用户

发布于 2011-12-23 02:34:34

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

  1. 您可以将内容分为第一部分和第二部分(主对象内的两个单独的跨度或div),并仅隐藏代表第二部分的子对象,而不隐藏父对象。
  2. 您可以将其高度设置为仅显示第一部分(使用overflow: hidden),而不是完全隐藏对象。
  3. 将主对象的内容更改为仅将第一部分作为内容(要求您在其他位置保留完整内容,以便再次展开时可以恢复)。

下面是选项1的一个工作示例:http://jsfiddle.net/jfriend00/CTzsP/

票数 4
EN

Stack Overflow用户

发布于 2011-12-23 02:34:49

您需要执行以下任一操作:

  • 在前n个单词之后放入span/etc.,并且只隐藏该部分,或者
  • 更改可见区域,或者
  • 使用“折叠”视图替换或切换span/etc.。

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

我倾向于最后一个,因为它很简单和明显,但这是个人偏好,真的不像以前那样正确。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8608295

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档