Блог

У меня есть блок кода, который сворачивает один div и расширяет другой одним нажатием кнопки. Расширяющаяся часть div повторяется только один раз, а затем больше ничего не делает, в то время как сворачиваемый div продолжает выполнять свою работу.

В коде я объявляю переменную с именем divSize , чтобы получить размер .widenDiv , мои рассуждения связаны с тем, что будут разные размеры экрана, которые не будут иметь одинаковую ширину в пикселях, поэтому я хочу сохранить пользовательский интерфейс как можно более стандартным.

Когда я нажимаю кнопку свертывания во второй раз, div уменьшится до своего первоначального размера. Анимация работает, как и ожидалось, однако она работает только один раз.

 $(document).ready(function() {
  var divSize = $('.widenDiv').width();
  $('.widenDiv').width() == divSize;

  $('#divAnimateBtn').click(function() {
    $('#collapseDiv').slideToggle("normal");

    if ($('.widenDiv').width() == divSize) {
      $('.widenDiv').animate({
        width: "90%"
      });
    } else {
      $('.widenDiv').animate({
        width: divSize
      });
    }
  });
});
  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="body-content col-sm-12 col-lg-12" style=" margin-top: -10px; height: 100%; background-color: white;">
  <div class="col-lg-2 col-sm-2 col-xs-2 clearfix left-column-container" style="background-color: white; float: left; max-height: 100vh; ">
    <div class="left-column" id="Test" style="background-color: white;">
      <button id="divAnimateBtn" type="button" class="btn btn-info"></button>
      <div class="collapse in" id="collapseDiv">
        <p>filler</p>
      </div>
    </div>
  </div>
  <div class="col-lg-9 col-sm-9 col-xs-9 widenDiv" style="background-color: white; text-align: center;">
    <div class="right-column-bottom col-lg-12" style="border: 1px solid black; padding-top: 5px; margin-top: 5px;">
      <p>filler</p>
    </div>
  </div>
</div>
  

Обновленный код, который исправил мою проблему:

Я добавил к кнопке функцию onClick().

  <button id="divAnimateBtn" type ="button" class="btn btn-info" onclick="extendDiv()" style="float: left;"><<</button>
  

используя ванильный js с несколькими строками кода jQuery, я реализовал предполагаемую анимацию пользовательского интерфейса.

 var exBtn = document.createElement("BUTTON"); //button is declared so I can slide out again.
var colBtn = document.getElementById("divAnimateBtn");
function extendDiv() {
            document.getElementById("widenDiv").style.width = "96%";
            $('#collapseDiv').slideToggle("slow");
            colBtn.style.display= "none";
            exBtn.innerHTML = ">>";
            document.getElementById("right-column-container").prepend(exBtn);
            exBtn.style = "border: 2px solid #0066CC; float: left; background-color: #fff; border-radius: 5px; color: #0066CC; font-size: 14px;";
            exBtn.onclick = shrinkDiv; //new function for the replacement button


        }

        function shrinkDiv() {
            exBtn.remove();
            colBtn.style.display = "inline";
             $('#collapseDiv').slideToggle("slow");
            document.getElementById("widenDiv").style.width = "" //<- sets CSS back to initial value;      
        }
  

установите скорость анимации для расширяющегося div в CSS

 #widenDiv{
    transition: 1s;
}