アコーディオンで余白を含めた高さ取得

Question

アコーディオンメニューについて質問です。
margin、padding、borderを含めた高さを取得したいのですが上手くいきません。
微妙に表示が切れてしまいます。

解決方法を教えて頂ければ大変助かります。

▼Javascript

<script>
  $(function(){
    $('.js-dropdown-box').wrap('<div class="js-dropdown-box-wrap">');
    $('.js-dropdown-box-wrap').css({
      'overflow': 'hidden',
      'height': 0,
      'transition': 'height .3s linear'
    });
    $('.js-dropdown-btn').css('cursor','pointer');
    $('.js-dropdown-btn').on('click',function(){
      if($(this).hasClass('js-dropdown-btn-on')){
        $(this).next('.js-dropdown-box-wrap').css('height','0');
        $(this).removeClass('js-dropdown-btn-on');
      }else{
        var target_height = $(this).next('.js-dropdown-box-wrap').children('.js-dropdown-box').outerHeight();
        $(this).next('.js-dropdown-box-wrap').css('height',target_height);
        $(this).addClass('js-dropdown-btn-on');
      }
    }).trigger('click');
  });
</script>

▼html

<div class="acd-menu">
<div class="underline_mds js-dropdown-btn">都道府県から探す</div>
  <div class="js-dropdown-box">
    <div class="acd-menu--title">北海道・東北</div>
    <ul id="acd-menu" class="acd-menu__list btn-list">
      <li><a href="1.html">北海道</a>
      </li>
    <li><a href="2.html">青森県</a>
      </li>
    <li><a href="3.html">岩手県</a>
      </li>
    <li><a href="4.html">宮城県</a>
      </li>
    <li><a href="5.html">秋田県</a>
      </li>
    <li><a href="6.html">山形県</a>
      </li>
    <li><a href="7.html">福島県</a>
      </li>
    </ul>
</div>
</div>

▼SCSS

//アコーディオン
.acd-menu {
  &__block {
    padding: 30px;
    background-color: #fff;
    @include max-screen($breakpoint-mobile) {
      padding: 12px;
    }
  }
  &--title {
    margin: 15px 0 5px;
    font-size: 14px;
    font-weight: 700;
  }
  .js-dropdown-btn {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
  }
  .js-dropdown-btn:after {
    content: "＋";
    position: absolute;
    right: 10px;
    top: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 8px;
    height: 8px;
    color: #F26161;
  }
  .js-dropdown-btn-on {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
  }
  .js-dropdown-btn-on:after {
    content: "－";
    position: absolute;
    right: 10px;
    top: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 8px;
    height: 8px;
    color: #F26161;
  }
  .js-dropdown-box-wrap {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .btn-list {
    margin: 0 0 10px;
    li {
      display: inline-block;
      margin: 5px 0 0 0;
      border: 1px solid #CCC;
      font-size: 12px;
      a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #313233;
        &:hover{
          background-color: #F8F8F8;
        }
      }
    }
  }

Answer 1

.js-dropdown-box の高さを取得して、その親の .js-dropdown-box-wrap に取得した高さを設定しています。

.js-dropdown-box-wrap にmarginやpaddingが設定されていないので、本来なら
.js-dropdown-box と .js-dropdown-box-wrap は同じ高さになるはずです。

同じ高さにならないのは、「マージンの相殺」が原因です。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

具体的には、.acd-menu--titleの margin-top の 15px が親要素(.js-dropdown-box)の外にはみ出しているのが原因です。

対処法はいろいろありますが、例えば親要素(.js-dropdown-box)に下記の設定すればマージンの相殺が発生しないので、うまくいきます。

 .js-dropdown-box {
    overflow: hidden; 
  }

他には、.acd-menu--titleのmargin-topは0にして、親要素(.js-dropdown-box)に padding-top: 15px で余白を作るとか、、、。

Comments

[kosabi]

有難うございます！
マージンの相殺について理解致しました。
ご提案頂いた対処法で解決致しました。