Я строю SPA с с помощью jQuery с Semantic {amp}amp; Bootstrap для пользовательского интерфейса. В настоящее время я сталкиваюсь с проблемой, когда jQuery не может скрыть и показать 2 элемента одного уровня, но везде работает. Когда выполняются строки Hide-this-Show-that, я вижу изменение DOM, когда я проверяю элемент, но на дисплее страница просто мигает. Сначала я подумал, что, может быть, это освежает, но после тщательного осмотра кажется, что это не так.

Вот мой код:

//JQUERY BELOW $.post(BaseURL   "account/login.php?param1=user{amp}amp;param2=pass", (response) ={amp}gt; { if (response == something) { $("#login_view").hide(); $("#main_view").show(); } else { // SOMETHING ELSE } }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="pusher"{amp}gt; {amp}lt;div class="container-fluid"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div id="login_view"{amp}gt; {amp}lt;!-- STUFF HERE --{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="main_view"{amp}gt; {amp}lt;!-- OTHER STAFF HERE --{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; 

Учитывая, что в других частях приложения подпрограммы Hide / Show работают, я подумал, что этот код очень прост. Когда я добавляю console.log после двух вызовов hide / show, он распечатывается очень хорошо. Идентификатор main_page уже установлен для отображения: нет в CSS при загрузке страницы

Просто нужно добавить display: none в #main_view, чтобы сначала спрятать его, а затем, как только ответ вернется, спрятать логин и показать main через jQuery.

 setTimeout(function(){ $("#login_view").hide(); $("#main_view").show(); }, 2000); 
 #login_view{ display: block; } #main_view{ display: none; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="pusher"{amp}gt; {amp}lt;div class="container-fluid"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div id="login_view"{amp}gt; {amp}lt;h1{amp}gt;Login{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="main_view"{amp}gt; {amp}lt;h1{amp}gt;Main{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; 

Ахед Кабалан

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Я взломал этот. Проблема была с переходами Semantic UI. Существуют похожие проблемы и с Git, когда элементы не могут измениться, если вы используете переходы, чтобы показать или скрыть элементы. Я только что изменил, изменил код с:

 $("#login_page").hide().transition("fade out"); $("#main_page").show().transition("fade in"); 

в

 $("#login_page").hide(); $("#main_page").show(); 

Спасибо за поддержку.