jquery - 带动画的动态高度和所有元素垂直居中对齐

Question

我有使用全局类的单选按钮。我希望尽可能少的代码能够重用元素...有几种方法可以显示单选按钮。一个带有点击时出现的信息的标签，另一个带有大量文本的标签。

如果有很多文本，我会遇到它合并到单选按钮中的问题。

有人知道我如何在这两种情况下使用代码吗？ 元素应始终垂直对齐居中。

示例和错误在这里:

var checkbox = $('.js-inputround');

(function($) {
  $(document).ready(function() {


    checkbox.each(function() {
      if ($(this).prop('checked')) {
        $(this).parent('.input-round__option').addClass('js-check-svg');
        $(this).parent('.js-show-info').addClass('js-show');
      }
    });


    //show small info,toggle active icon
    checkbox.change(function() {
      if (checkbox.length) {
        if (checkbox.is(":checked")) {
          roundInputShowElements($(this));

        } else {
          roundInputHideElements($(this));
        }
      }


    });

  });

  $(window).on('pageshow', function() {
    checkbox.each(function() {
      if ($(this).prop('checked')) {
        $(this).parent('.input-round__option').addClass('js-check-svg');
        $(this).parent('.js-show-info').addClass('js-show');
      }
    });
  });


})(jQuery);


function roundInputShowElements(element) {
  element.parent('.js-show-info').addClass('js-show');
  element.parent('.input-round__option').addClass('js-check-svg');
}


function roundInputHideElements(element) {
  element.parent('.js-show-info').removeClass("js-show");
  element.parent('.input-round__option').removeClass('js-check-svg');
}

.input-round__container {
  min-height: 55px;
}

.input-round__option {
  display: block;
  vertical-align: middle;
  position: relative;
  height: 100%;
}

.input-round__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-block;
  outline: none;
  vertical-align: middle;
  margin: 0;
}

.icon {
  fill: currentColor;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input-round__icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #CB4C40;
}

.js-check-svg .input-round__icon--active {
  opacity: 1;
  transition: all 0.1s;
}

.icon {
  fill: currentColor;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
}

.input-round__icon--active {
  opacity: 0;
  transition: all 0.1s;
}

.input-round__option input {
  opacity: 0;
  margin: 0;
}

.input-round__text {
  display: inline-block;
  top: 50%;
  position: relative;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-left: 10px;
}

.js-check-svg .input-round__label {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #46474a;
  transition: all 0.1s;
}

.input-round__option.js-show .input-round__info {
  display: block;
  opacity: 1;
  height: 18px;
}

.input-round__info {
  height: 0;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
  font-weight: 400;
  color: #848e8e;
  font-size: 14px;
  line-height: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-round__container">
<label class="input-round__option js-show-info js-show js-check-svg" data-qa="label">


    <div class="input-round__input">

        <svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
             height="100%"><title id=":option-title">option</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
                  id="path-1"></path>
        </svg>


        <svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
             viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
                  id="path-1"></path>
        </svg>


    </div>

    <input class="js-inputround " type="checkbox" id="one" >


    <div class="input-round__text">
        <span class="input-round__label ">Label</span>
        <span class="input-round__info ">small information</span>
    </div>
</label>
</div>


<div class="input-round__container">
<label class="input-round__option " data-qa="label">


    <div class="input-round__input">

        <svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
             height="100%"><title id=":option-title">option</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
                  id="path-1"></path>
        </svg>


        <svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
             viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
                  id="path-1"></path>
        </svg>

    </div>

    <input class="js-inputround " type="checkbox" required="" id="two" name="" value="1">


    <div class="input-round__text">
        <span class="input-round__label label--required">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum</span>
        <span class="input-round__info "></span>
    </div>
</label>
</div>

Answer 1

只需添加宽度:calc(100% - 40px);

.input-round__text {
      display: inline-block;
      top: 50%;
      position: relative;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      padding-left: 10px;
width: calc(100% - 40px);
    }

var checkbox = $('.js-inputround');

(function($) {
  $(document).ready(function() {


    checkbox.each(function() {
      if ($(this).prop('checked')) {
        $(this).parent('.input-round__option').addClass('js-check-svg');
        $(this).parent('.js-show-info').addClass('js-show');
      }
    });


    //show small info,toggle active icon
    checkbox.change(function() {
      if (checkbox.length) {
        if (checkbox.is(":checked")) {
          roundInputShowElements($(this));

        } else {
          roundInputHideElements($(this));
        }
      }


    });

  });

  $(window).on('pageshow', function() {
    checkbox.each(function() {
      if ($(this).prop('checked')) {
        $(this).parent('.input-round__option').addClass('js-check-svg');
        $(this).parent('.js-show-info').addClass('js-show');
      }
    });
  });


})(jQuery);


function roundInputShowElements(element) {
  element.parent('.js-show-info').addClass('js-show');
  element.parent('.input-round__option').addClass('js-check-svg');
}


function roundInputHideElements(element) {
  element.parent('.js-show-info').removeClass("js-show");
  element.parent('.input-round__option').removeClass('js-check-svg');
}

.input-round__container {
  height: 55px;
}

.input-round__option {
  display: block;
  vertical-align: middle;
  position: relative;
  height: 100%;
}

.input-round__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-block;
  outline: none;
  vertical-align: middle;
  margin: 0;
}

.icon {
  fill: currentColor;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input-round__icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #CB4C40;
}

.js-check-svg .input-round__icon--active {
  opacity: 1;
  transition: all 0.1s;
}

.icon {
  fill: currentColor;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
}

.input-round__icon--active {
  opacity: 0;
  transition: all 0.1s;
}

.input-round__option input {
  opacity: 0;
  margin: 0;
}

.input-round__text {
  display: inline-block;
  top: 50%;
  position: relative;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-left: 10px;
width: calc(100% - 40px);
}

.js-check-svg .input-round__label {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #46474a;
  transition: all 0.1s;
}

.input-round__option.js-show .input-round__info {
  display: block;
  opacity: 1;
  height: 18px;
}

.input-round__info {
  height: 0;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
  font-weight: 400;
  color: #848e8e;
  font-size: 14px;
  line-height: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-round__container">
<label class="input-round__option js-show-info js-show js-check-svg" data-qa="label">


    <div class="input-round__input">

        <svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
             height="100%"><title id=":option-title">option</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
                  id="path-1"></path>
        </svg>


        <svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
             viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
                  id="path-1"></path>
        </svg>


    </div>

    <input class="js-inputround " type="checkbox" id="one" >


    <div class="input-round__text">
        <span class="input-round__label ">Label</span>
        <span class="input-round__info ">small information</span>
    </div>
</label>
</div>


<div class="input-round__container">
<label class="input-round__option " data-qa="label">


    <div class="input-round__input">

        <svg class="icon icon--biggest input-round__icon" id=":option_no_35" viewBox="0 0 35 35" width="100%"
             height="100%"><title id=":option-title">option</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z"
                  id="path-1"></path>
        </svg>


        <svg class="icon icon--biggest input-round__icon input-round__icon--active" id=":checkbox-yes_35"
             viewBox="0 0 35 35" width="100%" height="100%"><title id=":checkbox-yes-title">checkbox-yes</title>
            <path d="M17.5,35 C7.83501688,35 0,27.1649831 0,17.5 C0,7.83501688 7.83501688,0 17.5,0 C27.1649831,0 35,7.83501688 35,17.5 C35,27.1649831 27.1649831,35 17.5,35 Z M17.5,33.90625 C26.5609217,33.90625 33.90625,26.5609217 33.90625,17.5 C33.90625,8.43907832 26.5609217,1.09375 17.5,1.09375 C8.43907832,1.09375 1.09375,8.43907832 1.09375,17.5 C1.09375,26.5609217 8.43907832,33.90625 17.5,33.90625 Z M25.8920268,12.6750186 C26.2749325,13.0132068 26.2749325,13.5666056 25.8938589,13.9031757 L25.1921705,14.5229176 L17.2189383,21.5585261 L16.5282424,22.1717955 C16.3340414,22.3416987 16.0812137,22.4306956 15.826554,22.4306956 C15.5755584,22.4306956 15.3245628,22.3416987 15.1321939,22.1717955 L14.441498,21.5585261 L10.4512177,18.0374856 C10.0646479,17.6960612 10.0646479,17.1458986 10.4512177,16.8044742 C10.6454187,16.634571 10.8982464,16.5488104 11.1492419,16.5488104 C11.4002375,16.5488104 11.6530652,16.634571 11.843602,16.8044742 L15.826554,20.3287509 L24.4959783,12.6750186 C24.6901793,12.5051155 24.9393428,12.4225911 25.1903384,12.4193548 L25.1940026,12.4193548 C25.4449982,12.4193548 25.6996579,12.5051155 25.8920268,12.6750186 Z"
                  id="path-1"></path>
        </svg>

    </div>

    <input class="js-inputround " type="checkbox" required="" id="two" name="" value="1">


    <div class="input-round__text">
        <span class="input-round__label label--required">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum</span>
        <span class="input-round__info "></span>
    </div>
</label>
</div>