#jquery #html
#jquery #HTML
Вопрос:
У меня есть блок кода, который сворачивает один 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;
}
Комментарии:
1. Может быть, это потому
$('.widenDiv').width()
, что возвращает число без единиц измерения? Попробуйте добавитьwidth: divSize 'px'
в свою анимацию. Также попробуйте создать фрагмент SO с образцом HTML и JS-кода2.
width()
может не получить правильную ширину — это может бытьouterWidth()
вам нужно, если вы анимируетеwidth
. Один из способов убедиться, что это то же самое, — использовать.width(divSize)
и переместить анимацию в css-переход (или просто добавить и удалить класс, который выполняет анимацию)3.
$('.widenDiv').width() == divSize;
не является допустимой формой для установки этого api.jquery.com/width Было бы полезно, если бы вы создали рабочий пример с использованием HTML-кода в виде фрагмента4. Это может быть ширина контейнера, попробуйте получить ширину окна
5. Основываясь на разметке, это может иметь начальную загрузку?