jquery - 同位素可点击元素 : grow height to match content

Question

我有一个带有可点击元素的标准同位素 View 。通过单击一个元素，它会变得更大。大元素的高度在 CSS 文件中定义，但我需要可变高度，具体取决于 DIV 的内容(内容是文本)；不幸的是，使用 min-height css-property 而不是 height 不起作用，即使内容更多，高度也始终是定义的最小高度。对此有何意见？

这是我的 JavaScript 代码:

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#container');
         jQuerycontainer.addClass('clickable');
   // add the class large to the first element
     jQuerycontainer.find('.views-row-1').each(function() {
         jQuery(this).addClass('large');
     });
     jQuerycontainer.isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 230
        },
        masonryHorizontal: {
            rowHeight: 230
        }
    });
    var jQueryoptionSets = jQuery('#options .option-set'),
        jQueryoptionLinks = jQueryoptionSets.find('a');
    jQueryoptionLinks.click(function() {
        var jQuerythis = jQuery(this);
        // don't proceed if already selected
        if (jQuerythis.hasClass('selected')) {
            return false;
        }
        var jQueryoptionSet = jQuerythis.parents('.option-set');
        jQueryoptionSet.find('.selected').removeClass('selected');
        jQuerythis.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = jQueryoptionSet.attr('data-option-key'),
            value = jQuerythis.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode(jQuerythis, options);
        } else {
            // otherwise, apply new options
            jQuerycontainer.isotope(options);
        }
        return false;
    });
    // change size of clicked element
    jQuerycontainer.delegate('.element', 'click', function() {
       // first remove all large classes
      jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');
      });   
        // then we can toggle large on the selected item
        jQuery(this).toggleClass('large');
        jQuerycontainer.isotope('reLayout');
    });
});
</script>

Answer 1

通常，如果将宽度设置为网格并将高度设置为自动，同位素项目的高度只会增加，具体取决于其内容和内容的样式；请参阅this fiddle here 。希望有帮助...