Question

情境： 我一直在使用一个jquery脚本，我发现它允许我使用Jquery显示/隐藏内容：dotdotdot用于多个嵌套的浮动列。

问题： 现在，展开时，浮动内容与 div.feature 和 div.featureWrap 容器的底部边框重叠。我已经尝试强制div元素包含浮点数溢出：隐藏，但是......没有运气。

期望的结果： 我希望选择的 div.feature 和 div.featureWrap 容器分别展开/折叠。

我确信这很简单，但是......我刚接触JS。这是销毁需要发生的事情吗？我看到div.css（'max-height'，''）......

任何帮助将不胜感激！

请参阅jsfiddle：http://jsfiddle.net/cpardon/tt5htr3s/11/

Jquery的：

$(function () {
    $(".desc").dotdotdot({
        ellipsis: '...',
        after: 'a.more',
        wrap: 'word',
        fallbackToLetter: true,
        callback: dotdotdotCallback,
        watch: 'window',
        height: null
    });
    $(".desc").on('click', 'a', function () {
        if ($(this).text() == "More") {
            var div = $(this).closest('.desc');
            div.trigger('destroy').find('a.more').hide();
            div.css('max-height', '');
            $("a.less", div).show();
        } else {
            $(this).hide();
            $(this).closest('.desc').css("max-height", "60px").dotdotdot({
                after: "a.more",
                callback: dotdotdotCallback
            });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
            $("a", this).remove();
        }
    }
});

CSS：

.left {float:left;}
.clearboth {clear:both;}
#featureWrap {width:100%;}
#featureWrap .feature {width:100px;margin:0 5px;border:1px solid #CCC;padding:7px;}
#featureWrap .feature .title {color:#777;padding:12px 0;font-size:20px;}
#featureWrap .feature .desc {font-size:12px;line-height:19px;color:#555;max-height:60px;}
#featureWrap .feature .desc a {color: rgb(224, 86, 40);text-decoration: none;}
#featureWrap .feature .desc a:hover {color: #666;text-decoration: none;}
#featureWrap .feature .desc a.less {display: none;}

Answer 1

更改第15行：

div.css('max-height', '');

到

div.css('max-height', 'none');

Fiddle

您的原始代码会尝试将样式设置为内嵌''，而max-height: 60px;又会尝试清除最大高度，但您的样式max-height: none;已在CSS中设置。通过放置{{1}}，它需要更高的优先级

JQ：dotdotdot ::用浮动子扩展父（高）

1 个答案: