Question

我有以下代码使div崩溃，但我意识到当我有背景颜色时，条形和内容之间存在差距。任何人都可以弄明白我如何消除这种差距？

(function($) {

  $.fn.collapse = function(method, options) {
    var settings = $.extend({
      collapse: "collapse",
      signTag: "<span></span>",
      titles: "h3",
      titlesChild: "span",
      container: "div",
      classOpen: "opened",
      open: "&#x2b;",
      close: "&#x2212;",
      rlOpen: "rl-open",
      rlClose: "rl-close"
    }, options);

    var $element = $(this).children(settings.titles);
    var $symbols = $(settings.signTag);
    var $signOpen = $symbols.html(settings.open);
    var $signClose = $symbols.html(settings.close);
    var $insertElement = $symbols.appendTo($element);

    $element.parent().addClass(settings.collapse);

    if ($element.next().hasClass(settings.classOpen)) {
      $element.children().html(settings.close).addClass(settings.rlClose);
    } else {
      $element.children().html(settings.open).addClass(settings.rlOpen);
    }

    var methods = {

      single: function() {
        return this.each(function() {

          $(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
            .prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);

          $element.on('click', function() {
            $(this).next().slideToggle().toggleClass(settings.classOpen);
            if ($(this).next().hasClass(settings.classOpen)) {
              $(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
            } else {
              $(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
            }
          });
        });
      }
    };

    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' + method + ' does not exist on jQuery.collapse ');
    }
  };

})(jQuery);

$(function() {
  $("#collapse").collapse('single', {});
});

#wrapper {
  margin: 0 auto;
  position: relative;
  max-width: 640px;
}
.collapse > h3 {
  background-color: #007197;
  color: #fff;
  margin: 0 auto;
  padding: 3%;
  text-decoration: none;
}
.collapse > h3 > span {
  float: right;
}
.collapse > h3 + div {
  display: none;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <main class="main-wrapper">
    <div id="collapse">
      <h3 style="background:black;">One</h3>
      <div style="background:red;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:red;">Two</h3>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:orange;">Three</h3>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:blue;">Four</h3>
      <div style="background:red;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:green;">Five</h3>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>
    </div>
  </main>
</div>

Answer 1

您看到了p元素与相邻h3标题之间的边距折叠效应。

您可以通过简单地添加以下CSS规则来阻止这种情况：

.collapse div {
    overflow: auto;
}

请参阅演示：https://jsfiddle.net/vauxjg7r/

Answer 2

Fiddle demo here

尝试添加此CSS样式：

.collapse p {
  margin: 0px;
}

但是如果你想保留上面的空间，你可以这样做：

.collapse p {
  margin: 0px;
  padding: 10px 0 0;
}

问题是由浏览器应用的样式引起的，您需要使用上面的代码覆盖它们。或者，您可以使用CSS重置来规范化浏览器样式。

Answer 3

这是段落的余量。您必须通过将其添加到样式表来覆盖用户代理样式表：

p {
  margin: 0;
  padding: .5em 0;
}

Answer 4

这是由于p元素上的边距崩溃造成的。

如果没有边框，填充，内联内容或间隙将块的边缘顶部与其第一个边缘顶部分开子块，或没有边框，填充，内联内容，高度， min-height或max-height分隔块的边距底部在最后一个孩子的边缘底部，那些边缘崩溃了。折叠的保证金最终在父母之外。

（https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing）

要阻止此效果发生，请将overflow: hidden;添加到.collapse > h3 + div。

(function($) {

  $.fn.collapse = function(method, options) {
    var settings = $.extend({
      collapse: "collapse",
      signTag: "<span></span>",
      titles: "h3",
      titlesChild: "span",
      container: "div",
      classOpen: "opened",
      open: "&#x2b;",
      close: "&#x2212;",
      rlOpen: "rl-open",
      rlClose: "rl-close"
    }, options);

    var $element = $(this).children(settings.titles);
    var $symbols = $(settings.signTag);
    var $signOpen = $symbols.html(settings.open);
    var $signClose = $symbols.html(settings.close);
    var $insertElement = $symbols.appendTo($element);

    $element.parent().addClass(settings.collapse);

    if ($element.next().hasClass(settings.classOpen)) {
      $element.children().html(settings.close).addClass(settings.rlClose);
    } else {
      $element.children().html(settings.open).addClass(settings.rlOpen);
    }

    var methods = {

      single: function() {
        return this.each(function() {

          $(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
            .prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);

          $element.on('click', function() {
            $(this).next().slideToggle().toggleClass(settings.classOpen);
            if ($(this).next().hasClass(settings.classOpen)) {
              $(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
            } else {
              $(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
            }
          });
        });
      }
    };

    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' + method + ' does not exist on jQuery.collapse ');
    }
  };

})(jQuery);

$(function() {
  $("#collapse").collapse('single', {});
});

#wrapper {
  margin: 0 auto;
  position: relative;
  max-width: 640px;
}
.collapse > h3 {
  background-color: #007197;
  color: #fff;
  margin: 0 auto;
  padding: 3%;
  text-decoration: none;
}
.collapse > h3 > span {
  float: right;
}
.collapse > h3 + div {
  display: none;
  margin: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <main class="main-wrapper">
    <div id="collapse">
      <h3 style="background:black;">One</h3>
      <div style="background:red;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:red;">Two</h3>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:orange;">Three</h3>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:blue;">Four</h3>
      <div style="background:red;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>

      <h3 style="background:green;">Five</h3>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
      </div>
    </div>
  </main>
</div>

折叠div时浮动背景

4 个答案: