边框将在单击时停止缩小尺寸

Question

我正在制作手风琴。我已经将jQuery用于动画。当我单击手风琴头时，按住+的边框的大小会减小。我只希望更改加号并使边框保持相同大小。

$(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"> This category will award a man in corporate life or otherwise who has demonstrated consistent integrity and progressive thinking in support of promoting women corporate intrapreneurs or entrepreneurs. The nominees will include men who have
                promoted, profiled, supported, and networked women in business, entrepreneurs or corporate women with world-class intervention in producing positive outcomes for everyday business challenges experienced by their audience and whose ability
                has made the working lives of their intended audience better because of its engagement. There will be three finalists and one winner sifted from nominations received, with two highly commended recipients.
              </p>
            </div>
          </div>
</section>

https://codepen.io/Kerv/pen/KKppVpo

Answer 1

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

另一种解决方案是为该块设置固定的width。首先，<span>必须是一个块元素。您将其添加到display: inline-block。那么默认情况下，填充将被视为在总宽度之内，因此左右有25px的填充。您的块大约为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 */
}

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