如何使用javascript设置DIV可见的加载

Question

我有此页面，我想做第一张卡片说明以显示onload。divid是"firstitem"，我无法计算出显示（sub）content onload的JavaScript。

(function (global, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else {
    factory(jQuery);
  }
})(this, function ($) {
  var defaultSettings = {
    prefix: "imagelistexpander-"
  };

  var waitForFinalEvent = (function () {
    var timer = null;
    return function (callback, uniqueId) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(callback, 500);
    };
  })();

  var imageListExpander = function (list, _settings) {
    var
      settings = $.extend({}, defaultSettings, _settings),
      $list = $(list),
      $items = $list.find('.' + settings.prefix + 'item'),
      $trigger = $list.find('.' + settings.prefix + 'trigger'),
      $closeTrigger = $list.find('.' + settings.prefix + 'trigger-close'),

      initialize = function () {
        $(window).bind('resize', resizeWindow);
        $trigger.bind('click', clickItem);
        $closeTrigger.bind('click', clickCloseTrigger);
      },
      resizeWindow = function () {
        waitForFinalEvent(function () {
          $items.filter('.active').each(function () {
            var
              $item = $(this),
              $expanderContents = $item.find('.' + settings.prefix + 'expander-contents'),
              $expander = $item.find('.' + settings.prefix + 'expander'),

              expanderHeight = $expanderContents.outerHeight();

            $item.css(
              'height',
              $item.find('.' + settings.prefix + 'contents').outerHeight() + expanderHeight
            );

            $expander.css('max-height', expanderHeight);
          });
        });
      },
      clickItem = function () {
        var $item = $(this).parents('.' + settings.prefix + 'item');
        `enter code here`

        if ($item.hasClass('active')) {
          hideItems($item);
        } else {
          showItem($item);
        }
      },
      clickCloseTrigger = function () {
        hideItems($items);
      },
      showItem = function ($item) {
        hideItems($item.siblings());

        var
          $expanderContents = $item.find('.' + settings.prefix + 'expander-contents'),
          $expander = $item.find('.' + settings.prefix + 'expander'),

          expanderHeight = $expanderContents.outerHeight();

        $item.addClass('active').css(
          'height',
          $item.find('.' + settings.prefix + 'contents').outerHeight() + expanderHeight
        );

        $expander.css('max-height', expanderHeight);
      },
      hideItems = function ($targetItems) {
        $targetItems = $targetItems.filter('.active');

        var $expanders = $targetItems.find('.' + settings.prefix + 'expander');

        $targetItems.each(function () {
          var $item = $(this);
          $item.css(
            'height',
            $item.find('.' + settings.prefix + 'contents').outerHeight()
          );
        });

        $targetItems.removeClass('active');
        $expanders.css('max-height', 0);
      };

    initialize();
  };

  $.fn.imagelistexpander = function (settings) {
    $(this).each(function () {
      imageListExpander(this, settings || {});
    });
  };

  return $;
});

(function (global, $) {
  $('.gallery-items').imagelistexpander({
    prefix: "gallery-"
  });
})(this, jQuery)

.gallery-expander {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 500ms ease;
  -o-transition: max-height 500ms ease;
  transition: max-height 500ms ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <ul class="gallery-items">
    <li class="gallery-item highlight-box ">
      <div class="gall">
        <div class="gallery-contents gallery-trigger hl-inner">
          <div class="thumbnail ">12121</div>
          <div class="title">Gallery Item</div>
        </div>
        <div class="gallery-expander" id="firstitem">
          <div class="gallery-expander-contents">
            <div class="gallery-trigger-close close">x</div>
            <div class="title">ytytytyt</div>
            <div class="contents">Lorem ipsum dolor</div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

只需在页面加载时编写此代码，就可以使用

  $('#firstitem').css('max-height',100);

Answer 2

您可以使用香草JS或jQuery收听onload事件

您想将onload设置为默认值以显示该元素，因为使用max-height的CSS会将其隐藏起来

香草JS：

max-height: 0

jQuery：

window.onload = () => {
  document.getElementById('firstitem').style.maxHeight = 'none';
};

Answer 3

使用jQuery中的

$(window).on('load', () => {
  $('#firstitem').css('max-height', 'none');
});

函数来检测页面何时完全加载。

然后在函数中，您可以根据其ID在页面中选择对象。选择它之后，您可以设置所选对象的CSS。

$( document ).ready()