0

Есть форма, а в ней выбор услуг(select) и при выборе одной из услуг появляется div с ещё одним select. Так вот сама суть вопроса, как сделать так, чтоб этот div появлялся не резко, а как бы плавно расширялся сам и соответственно расширял всю форму вниз?

function Selected(a) {
  var label = a.value;
  if (label == 3) {
    document.getElementById("docsl").style.display = 'block';
    document.getElementById("docsu").style.display = 'none';
  } else if (label == 1) {
    document.getElementById("docsl").style.display = 'none';
    document.getElementById("docsu").style.display = 'block';
  } else {
    document.getElementById("docsl").style.display = 'none';
    document.getElementById("docsu").style.display = 'none';
  }
}
<!--Основной select-->
<select name="service" onChange="Selected(this)">
  <option value="0" selected ></option>
  <option value="1" selected>Услуга 1</option>
  <option value="2" selected>Услуга 2</option>
  <option value="3" selected>Услуга 3</option>
  <option value="4" selected>Услуга 4</option>       
</select>
<!--Один из появляющихся div-->
<div name="docsl" id="docsl" style='display:none;'>
  <div class="label">
    Доп выбор
  </div>
  <div class="field-input">
    <select name="docl" class="input">
      <option value="0" selected></option>
      <option value="1" selected>Доп выбор 1</option>
      <option value="2" selected>Доп выбор 2</option>         
    </select>
  </div>
</div>

2 ответа 2

2

div
{
  width: 400px;
  height: 10px;
  background: red;
  transition: 1s;
}

div:hover
{
  height: 400px;
}

/* Если конечный размер div-а неизвестен, используйте примерный max-height вместо height */
<div></div>

2
  • оно бы так хорошо, но при этом div так же резко появляется, но при наведении на него курсора начинает расширятся, а нужно, чтоб плавно расширялся при появлении
    – user283744
    3 фев 2018 в 16:54
  • Ну так я привёл код для примера. Измените :hover на свой класс, и добавляйте его, когда нужно показать блок
    – 0xSA
    3 фев 2018 в 16:57
0

Спасибо за помощь, но реализовал иначе. Может кто такой же ноль как и я, вот ему моё решение. Всё оказалось намного проще, чем я думал, просто использовал функции SlideUp и SlideDown. Пример кода:

function Selected(a) {
    var label = a.value;
    if (label==3) {
        $(docs_uzi).slideUp("slow");
        $(docs_lazer).slideDown("slow");            
    } else if (label==1) {
        $(docs_lazer).slideUp("slow");
        $(docs_uzi).slideDown("slow");
    }
    else {
        $(docs_lazer).slideUp("slow");
        $(docs_uzi).slideUp("slow"); 
    }        

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.