javascript - 单击时边框停止缩小尺寸

Question

我正在制作 Accordion 。我使用 jQuery 制作动画。当我单击 Accordion 头时，包含 + 的边框会缩小。我只希望加号改变并且边框保持相同的大小。

$(document).ready(function() {
  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    $(this).removeClass('coll-back');
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(400);
      $("plusminus").text('+');
      $(this).removeClass('coll-back');
      $('.rmv-cls').removeClass('coll-back');
    }

    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(400);
      $(this).children("plusminus").text('+');
      $(this).removeClass('coll-back');
    } else {
      $(this).next(".accordion_body").slideDown(400);
      $(this).children("plusminus").text('');
      $(this).children("plusminus").append('<hr class="hr-clc">');
      $(this).toggleClass('coll-back');
      $(this).addClass('rmv-cls');
    }
  });
});

$('plusminus').on("click", function() {
  $(this).toggleClass('active');
  $(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});

.plusminus {
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 15px 25px;
  font-size: 36px;
  -webkit-font-smoothing: subpixel-antialiased;
}

#plus-1 {
  position: relative;
  top: 5px;
  left: -27%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
  <div class="acc-main">
    <div class="container">
      <div class="kind">
        <div class="accordion_container">
          <div class="accordion-main">
            <div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
            </div>
            <div class="accordion_body" id="a1" style="display: none;">
              <p class="para-acc"> 
              </p>
            </div>
          </div>
</section>

Answer 1

所使用的字体具有不同宽度的字符，即字符+和-具有不同的宽度。因此，当它们切换时，它会影响 block 的总宽度。您可以使用等宽字体来解决这个问题，例如 Monospace、Courier、Courier New 或 Lucida Console。

另一个解决方案是设置固定的 width对于 block 。
一、<span>必须是 block 元素。您添加到它 display: inline-block 。默认情况下，内边距将被视为在总宽度内，因此左侧和右侧的内边距均为 25 像素。你的区 block 大约是72px(+时)，那么你可以添加width: 22px (50px + 22px = 72px 固定宽度)。

.plusminus {
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 15px 25px;
  font-size: 36px;
  -webkit-font-smoothing: subpixel-antialiased;
  display: inline-block; /* add this */ 
  width: 22px; /* add this */
}

Accordion 头的高度会随之改变，但没什么大的。