jQuery隐藏/显示失败

问题描述 投票：0回答：1

我正在使用带有语义和引导UI的jQuery构建SPA。当前，我面临一个问题，即jQuery无法隐藏和显示相同级别的2个元素，但在其他所有地方都起作用。当执行“隐藏此显示”行时，我在检查元素时可以看到DOM的变化，但是在显示时，页面只是闪烁了。起初我以为可能是令人耳目一新的，但经过仔细检查，似乎没有。

这是我的代码：

//JQUERY BELOW
$.post(BaseURL + "account/login.php?param1=user&param2=pass", (response) => {
  if (response == something) {
    $("#login_view").hide();
    $("#main_view").show();
  } else {
    // SOMETHING ELSE
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <div class="pusher">
    <div class="container-fluid">
      <div class="row">

        <div id="login_view">
          <!-- STUFF HERE -->
        </div>

        <div id="main_view">
          <!-- OTHER STAFF HERE -->
        </div>

      </div>
    </div>
  </div>
</body>

考虑到在应用程序的其他部分中，“隐藏/显示”子例程正在运行，我认为这段代码很简单。当我在两个隐藏/显示调用之后添加console.log时，它打印得很好。已将main_page ID设置为显示：页面加载时CSS中没有显示]

javascript jquery html single-page-application
1个回答
0
投票

只需先将display: none添加到#main_view即可将其隐藏，然后在响应返回后立即隐藏登录名并通过jQuery显示main。

setTimeout(function(){
  $("#login_view").hide();
  $("#main_view").show();
}, 2000);
#login_view{
  display: block;
}
#main_view{
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

    <div class="pusher">
        <div class="container-fluid">
            <div class="row">

                <div id="login_view">
                   <h1>Login</h1>
                </div>

                <div id="main_view">
                    <h1>Main</h1>
                </div>

            </div>
        </div>
    </div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.