JQ:dotdotdot :：展开带有浮动子的父级(高度)

Question

场景:我一直在使用一个jquery脚本，它允许我为多个嵌套的浮动列显示/隐藏Jquery:dotdotdot的内容。

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

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

我相信这很简单，但是.我刚开始和JS合作。这是破坏需要发生的事情吗？我看到div.css(“最大高度”，“”).

任何帮助都将不胜感激！

见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');

小提琴

您的原始代码将尝试将样式与''内联，后者依次试图清除最大高度，但您的max-height: 60px;样式是在CSS中设置的。通过放置一个max-height: none;，它具有更高的优先级