单击

Question

我面临一个奇怪的问题，可折叠div的高度。即使在div关闭/折叠之后，div的扩展高度仍然存在。请参考下面的图片

Javascript在点击时将高度添加到li。作为参考，这是检查元素部分。

<ul id="og-grid" class="og-grid">

            <li><a target="_blank" href="www.somewebsite.com" data- 
   largesrc="uploadimage/project/sfs.jpg" data-title="Website Redesign of " 
   data-type="WebSite" data-description="Website Redesign "><img 
   src="uploadimage/project/thumb/sfs.jpg" alt="img00"></a></li>

   <li style="**transition: height 350ms ease 0s; height: 719px;**" 
 class="">
   <a href="#/" data-largesrc="uploadimage/project/notouch.jpg" data- 
  title="No Touch" data-type="Mobile Application" data-description="Notouch 
  is a simple but useful app that helps you to lock the screen temporarily 
  to prevent unauthorized clicks or to go to other apps from the current 
  screen. This is especially useful when you give your Phone to kids to view 
  videos or YouTube. This app will disable the touch facility temporarily."> 
  <img src="uploadimage/project/thumb/notouch.jpg" alt="img01"></a></li>

  <li><a target="_blank" href="www.fhjgh.com" data- 
  largesrc="uploadimage/project/2capture.jpg" data-title="Test" data- 
  type="WebSite" data-description="hI there njwehkasd kahffhsaf sdkfhsdf 
  saklhflkdshf sdhfksdhf kldsh"><img 
  src="uploadimage/project/thumb/2capture.jpg" alt="img02"></a></li>

  <li><a target="_blank" href="http://www.jhghjghjg.in" data- 
  largesrc="uploadimage/project/green.jpg" data-title="Green Homes" data- 
  type="WebSite" data-description=", due to better usage of pictures"><img 
  src="uploadimage/project/thumb/green.jpg" alt="img03"></a></li>

 <li><a href="#/" data-largesrc="uploadimage/project/leonardo.jpg" data- 
 title="Leonardo" data-type="Logo Design" data-description="The Logo design 
 . We have used the negative space design concept here to make the L hidden 
  inside a box ( Box represent a furniture)"><img 
 src="uploadimage/project/thumb/leonardo.jpg" alt="img04"></a></li>

</ul>

Javascript部分（我相信）就是这个。

  open: function () {

        setTimeout($.proxy(function () {
            // set the height for the preview and the item
            this.setHeights();
            // scroll to position the preview in the right place
            this.positionPreview();
        }, this), 25);

    },
    close: function () {

        var self = this,
            onEndFn = function () {
                if (support) {
                    $(this).off(transEndEventName);
                }
                self.$item.removeClass('og-expanded');
                self.$previewEl.remove();
            };

        setTimeout($.proxy(function () {

            if (typeof this.$largeImg !== 'undefined') {
                this.$largeImg.fadeOut('fast');
            }
            this.$previewEl.css('height', 0);
            // the current expanded item (might be different from this.$item)
            var $expandedItem = $items.eq(this.expandedIdx);
            $expandedItem.css('height', $expandedItem.data('height')).on(transEndEventName, onEndFn);

            if (!support) {
                onEndFn.call();
            }

        }, this), 25);

        return false;

    },
    calcHeight: function () {

        var heightPreview = winsize.height - this.$item.data('height') - marginExpanded,
            itemHeight = winsize.height;

        if (heightPreview < settings.minHeight) {
            heightPreview = settings.minHeight;
            itemHeight = settings.minHeight + this.$item.data('height') + marginExpanded;
        }

        this.height = heightPreview;
        this.itemHeight = itemHeight;

    },
    setHeights: function () {

        var self = this,
            onEndFn = function () {
                if (support) {
                    self.$item.off(transEndEventName);
                }
                self.$item.addClass('og-expanded');
            };

        this.calcHeight();
        this.$previewEl.css('height', this.height);
        this.$item.css('height', this.itemHeight).on(transEndEventName, onEndFn);

        if (!support) {
            onEndFn.call();
        }

    },
    positionPreview: function () {

        // scroll page
        // case 1 : preview height + item height fits in window´s height
        // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
        // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
        var position = this.$item.data('offsetTop'),
            previewOffsetT = this.$previewEl.offset().top - scrollExtra,
            scrollVal = this.height + this.$item.data('height') + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - (winsize.height - this.height) : previewOffsetT;

        $body.animate({ scrollTop: scrollVal }, settings.speed);

    },
    setTransition: function () {
        this.$previewEl.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
        this.$item.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
    },
    getEl: function () {
        return this.$previewEl;
    }
}

return {
    init: init,
    addItems: addItems
};

}）（）;

请咨询，如何解决此问题。 （有没有CSS或Javascript方式）

Answer 1

尝试在动画结束时执行包含打开图像的容器上的命令javascript：remove（）或empty（）。如果在尝试这些命令后仍然看到错误的高度，则表示您已经在容器上应用了宽度/高度属性，因此您必须将其删除，将其值更改为＆＃39;＆ ＃39;

编辑：

close: function () {
    ....
    setTimeout($.proxy(function () {            
        document.getElementsByClassName('og-expander')[0].parentElement.removeAttribute("style");
        if (typeof this.$largeImg !== 'undefined') {
    ....

我已经测试过，它有效。