Question

我正在设计一个网站，它将显示长文本块，这些文本经常包含对文本其他部分的笨拙，难以阅读的内部交叉引用。例如，原文中的一段可能会说：

“......正如本文第一一四章关于现代艺术的第（二）项（a）项所讨论的那样。”

我想以更简洁的格式向读者呈现此文本，例如：

“......正如第1014章（2）（a）中关于现代艺术所讨论的那样。”

但我必须让用户选择在我的缩写版本和原始版本之间切换。我想通过让用户点击或点击特定文本来完成此操作，该文本将在其缩写（默认）演示文稿及其完整原始版本之间切换。理想情况下，缩写或缩放文本块的方式应以这样的方式向用户发出信号，即为了便于阅读而缩短较长的原始段落，但可以点击/点击以扩展。

有人可以建议我如何编程这样的东西吗？应该/可以用HTML，CSS，jQuery，JavaScript或其他东西来完成吗？

（为了清楚起见，我不需要一种能够自动将原始文本转换为简短形式的算法;我可以在每种情况下手动识别并输入简短形式。）

谢谢！

Answer 1

如果您正在执行相对较短的文字片段，我建议将较长的版本存储在范围标记data-的{{1}}属性中。然后使用jQuery将span标记内的文本替换为<span>属性中存储的文本。

<强> HTML

data-

<强> CSS

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim 
    nisl, elementum sit amet tortor eu, finibus tristique libero. Quisque 
    eget varius magna. Suspendisse sodales vitae ligula eget pellentesque. 
    <span data-long-text="Aenean pharetra ut massa non volutpat">Aenean 
    123</span>. Vivamus eu viverra eros. Aliquam condimentum lacus odio, 
    sit amet vulputate sem lacinia id. Suspendisse ultrices, lectus ut 
    volutpat cursus, justo risus aliquet lectus, hendrerit interdum massa 
    arcu at ipsum.
</p>

<强>的jQuery

span[data-long-text] {
    border-bottom: 1px dotted red;
    cursor: pointer;
}
// optional styling changed to long text
.long-text[data-long-text] {
    border-bottom-color: green;
}

jsFiddle：http://jsfiddle.net/hp383q1t/

Answer 2

https://jsfiddle.net/1gLv5qyv/

使用

$(".text-toggle").click(function(){
    $(".toggleAble").toggle();
});

使用JQuery插件。

Answer 3

你可以创建一个带有属性显示的css类：none用于文本赋予它id并使用jquery方法来切换类

Answer 4

这比jQuery，CSS和vanilla JS更有可能

HTML：

<p class="original">you original text</p>

<p class="secondary">secondary text</p>

CSS：

.secondary { display:none; }

jQuery的：

jQuery('.original').click(function(){
    jQuery(this).hide();
    jQuery('.secondary').show();
});

Answer 5

你会像这样使用html，css和jquery（javascript）：

......如第一千章第（2）款（a）项所述这篇关于现代艺术的文章有十四篇。

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});

＆＃13;

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});

＆＃13;

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>...as discussed in <a href="#" class="ref" data-att="Ch. 1014(2)(a)">subparagraph (a) of subdivision (2) of chapter one thousand and fourteen</a> of this article concerning modern art.</p>

＆＃13;

Answer 6

如果SEO不是一个考虑因素，我想我会像这样接近它并将长短描述存储在数据属性中。通过此运行，您只需要专注于正确定义HTML结构。

http://jsfiddle.net/skooliano/nyuroero/3/

<强> HTML

<p class="has-expanded-text">
     ...as discussed in <span class="toggle short" data-short-
     description="Ch. 1014(2)(a)" data-long-description="subparagraph 
     (a) of subdivision (2) of chapter one thousand and fourteen of this 
     article"></span> concerning modern art.
</p>

<强> CSS

.toggle { color: blue; text-decoration: underline; cursor: pointer; }

<强>的jQuery

$('p.has-expanded-text').each(function(index){
    var $span = $(this).find('.toggle'),
        $short = $span.data('short-description'),
        $long = $span.data('long-description');

    $span.text($short); // sets default text to short description

    $span.click(function(){
        if($span.hasClass('short')){
            $(this).addClass('long').removeClass('short');
            $(this).text($long);
        }
        else{
            $(this).addClass('short').removeClass('long');
            $(this).text($short);
        }
    });
});

通过单击或点击切换HTML文本

6 个答案: