Div не полностью заменен в команде show hide Jquery
У меня есть этот код https://jsfiddle.net/23h4jrde/2/, который позволяет вам заменять содержимое div при нажатии кнопки. Я думаю, что предыдущий контент еще не полностью заменен, потому что, когда показывается новый контент, он опускается вниз.
$('.ctabtn').on('click', function(){
$(".information").hide();
$(".ctabtn").hide();
$('.hosted-cities').show();
});
Почему у вас <div class = "card__img card__img--vader"> </div> этот div? на вершине
Скрипт не заменяет содержимое, он просто скрывает целевые элементы.
Ответы 2
В вашем примере это скрыто. Спрятался - не заменил. Для замены вы можете использовать метод .html().
Описанная проблема может быть вызвана несколькими причинами:
1) Элемент ".information" или ".ctabtn" в исходном коде имеет стили !важный, которые будут игнорировать встроенные стили метода скрытия.
2) Это может быть проблема с анимацией, поэтому вы можете изменить продолжительность скрытия:
$('.ctabtn').on('click', function(){
$(".information").hide(0);
$(".ctabtn").hide(0);
$('.hosted-cities').show();
});
3) Если вы хотите заменить поведение, измените методы .html().
Я не уверен, что вы после. Но если вы хотите удалить скрытые элементы, вы можете попробовать что-то вроде этого.
<div ID = "wrapper"> //add a wrapper
<span class = "information">
<p class = "card__text"> 2020 Winter Whiskey Tasting Festival </p>
<p class = "card__text2"> Sat, January 25, 2020 </p>
<p class = "card__text3"> 4:00 PM – 6:00 PM CST </p>
</span>
<div class = "card__btn ctabtn">JOIN US</div>
</div>
<div class = "hosted-cities">
<p class = "card__text"> Choose your City </p>
<button class = "card__btn" id = "" type = "button">Dallas</button>
<button class = "card__btn" id = "" type = "button">Denver</button>
</div>
jQuery:
$('.ctabtn').on('click', function(){
$('.hosted-cities').show();
$('#wrapper').remove(); //removes the div
});
Отредактировано Скрипка
Я не вижу такого поведения, возможно, некоторые сравнительные скриншоты помогут.