Question

我在单页的html中有两个列表..我想在我的页面加载时只显示一个列表，其他将被隐藏，

但是当我的页面被加载时，两个列表都在那里，经过一段时间的延迟，另一个被隐藏

这里是我的Html代码

<div id="menu" class="menu-v" data-role="content">

    <ul  class="listUl">
           <c:forEach items="${model.vaults}" var="vault" varStatus="count">
            <li class="outer" id="${vault.vaultId}" name="${vault.vaultName}">
              <div  class="listViewitem">
                <div class="squaredThree">
                    <input type="checkbox" value="None" id="${vault.vaultId}" name="check" />
                    <label for="${vault.vaultId}"></label>
                </div> 
                    <span>${vault.vaultName}</span>
                    <div class='jump-link' id="${vault.vaultId}" name="${vault.vaultName}" >
                    <a>detail</a>  
                    </div>

               </div>
            </li>
            </c:forEach>

        </ul>



            <ul class="tiles">
                 <c:forEach items="${model.vaults}" var="vault" varStatus="count">
                    <li id="safeLayer">
                       <img src="images/rectangle.png" id="safeBase1" width="30" height="30" />
                       <img src="images/rectangle.png" id="safeBase2"  width="30" height="30"/>
                        <div class="tile tile-small tile-${count.index} slideTextLeft " id="${vault.vaultId}" name="${vault.vaultName}">
                             <div  align="center">
                                <img src="images/vault/personal.png"  />    
                             </div>
                             <div class="nameblock" >
                               <span>${vault.vaultName}</span>
                             </div>
                          </div>    
                        </li>
                    </c:forEach>

            </ul>
            </div>

和我的Jquery ,,,

$(document).ready(function(){
$(".tiles").hide();
$(".listUl").show();

}）;

请解决我的问题

Answer 1

您可以添加display:none作为默认值 -

<ul class="tiles" style='display:none;'>

Answer 2

这次加载第一页时：

- 首先加载html - 然后javascript执行。

当您的页面加载时，直到执行javascript，您的列表才会显示。

你需要使用css。

在你的第二个ul：

<ul class="tiles" style="display: none;">

应该完成。

隐藏并显示不在jQuery中工作

2 个答案: