javascript - jQuery 扩展器插件 css 文本显示失败

Question

为什么文本在显示时排在不同的行中？

jquery 插件:http://plugins.learningjquery.com/expander/

HTML:

<div class="expandable">
        <span style="font-size:13px;">Description this is an item that is very good and i like it very cool muchtion this is an item that is very good and i like it very much Descr this is an item that is very good and i like it very much Desc this is an item that is very good and i like it very much pt</span>
        </div>

J查询:

$('div.expandable span').expander({
slicePoint:       69,  // default is 100

expandText:       'More', // default is 'read more'

userCollapseText: 'Less'  // default is 'read less'

});

Answer 1

因为每个 div 都默认设置了以下 css 规则:

display: block;

这意味着，除非您不将其更改为:

display: inline;

总之，请尝试将其设置为行内元素。

此外，我认为您不需要周围的 div。 span 元素默认总是内联的。只需从那里的 div 设置类，更改您的 jQuery 选择器，一切都会正常工作。

编辑:有关 css 显示属性的更多信息，请查看此处:http://www.w3schools.com/cssref/pr_class_display.asp

编辑:由于某些奇怪的原因，插件在执行展开/折叠时设置了显示属性。所以，你需要做的就是改变

$('div.expandable span').expander({
slicePoint:       69,  // default is 100

expandText:       'More', // default is 'read more'

userCollapseText: 'Less'  // default is 'read less'
});

调用

$('div.expandable span').expander({
slicePoint:       69,  // default is 100
afterExpand: function()
             {
                $("div.expandable span").css("display", "inline");
             },
expandText:       'More', // default is 'read more'

userCollapseText: 'Less'  // default is 'read less'
});

有时，jQuery .show() 方法的默认处理也不会异常(exception)。有时您需要在元素上定义自己的显示方法。而且我认为该插件只是使用.show()，这会导致显示错误。