使用jQuery展开/折叠文本

franki 发表于 Dev

法郎

当我想扩展文本时，我总是使用以下jQuery代码：

jQuery(".readMore").bind("click", function () {
    jQuery(this).text(jQuery(this).text() == "Leer más" ? "Ocultar" : "Leer más");
    jQuery(this).prev().slideToggle();
    });
});

和HTML代码，如下所示：

<div class="alwaysDisplay"><b>Text to display always</b></div>
<div class="expandText">Text to expand</div>
<div class="readMore">Leer más</div>

因此，我可以单击“ Leermás”文本显示隐藏的文本。

我的问题是，使用此代码，网络显示如下内容：

Text to display always

Leer más

但我想显示如下内容：

Text to display always Leer más

我的意思是，“按钮”在同一行中展开。我想问题是当我使用div标签时，它将在下一行显示文本。如何在同一行中显示“按钮”消息？

非常感谢你。

未定义

那是因为div是一个block元素。无论是设置display属性inline-block或使用不同的元件等span，其是一个inline元件。

.alwaysDisplay, .expandText {
   display: inline-block; 
}

您的标记不是语义的，您不应该div对所有内容都使用s，因为文本内容使用了p元素。对于按钮，应使用button或a元素：

一条建议：

HTML：

<p class="text_content">
    <b>Text to display always</b>
    <span class="hidden_text">Text to expand</span>
</p>
<a href='#' class='read_more'>read more</a>

JavaScript：

$('.read_more').on('click', function(e) { 
    e.preventDefault();
    $(this).text(function(_, currentText){
        return currentText === 'read more' ? 'read less' : 'read more';
    }).prev().find('.hidden_text').stop().slideToggle();
});

http://jsfiddle.net/s7p8v/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。