单击时停止缩小尺寸的边框

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"> 
              </p>
            </div>
          </div>
</section>

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 */
}

手风琴头的高度会随之改变一点点，但不会太大。

Answer 2

添加以下css代码

.plusminus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    line-height: 70px;
    box-sizing: border-box;
}

Answer 3

您已经通过单击手风琴将 .active class 添加到 .plusmimus class。我添加了一些额外的 CSS 代码以使其看起来更符合您的要求。

$(document).ready(function() {
  $('.plusminus').on("click", function() {
    $(this).toggleClass('active');
  });
});

.plusminus {
  display: inline-block;
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 30px;
  cursor: pointer;
  position: relative;
}

.plusminus::before,
.plusminus::after {
  position: absolute;
  content: '';
  width: 16px;
  height: 2px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #FFF;
  transition: 0.15s ease-out all;
}
.plusminus::after {
  width: 2px;
  height: 16px;
}
.plusminus.active::before {
  transform: rotate(180deg);
}
.plusminus.active::after {
  transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>

如果有帮助，请告诉我。

单击时停止缩小尺寸的边框

Border to stop reducing size when clicked

html

javascript

css

jquery

accordion