Question

当我想扩展文本时，我总是使用这个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标签时，它会在下一行显示文本。我怎样才能在同一行显示“按钮”Leermás？

非常感谢。

Answer 1

那是因为div是block元素。将display属性设置为inline-block或使用span之类的其他元素，即inline元素。

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

您的标记不是语义，您不应该将div用于所有内容，因为文本内容使用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/

使用jQuery扩展/折叠文本

1 个答案: