Question

这里有JS / jQuery的新手。第一个问题：当页面加载或刷新时，整个子子菜单会闪烁0.5秒，因此可以“隐藏”。我首先把脚本放在“body”标签的末尾，但是在这个眨眼之后我把它放在“head”中所以有没有办法让它实际上隐藏起来，就像真的隐藏一样，当页面是负载？第二个问题是，当我点击蓝色或绿色方形菜单时，滑动不顺畅。这就像反弹效果。是因为“隐藏”吗？最后一个问题是使用slideDown函数。我应该在哪里使用slideUp让它回到它隐藏的位置？

jQuery(document).ready(function($) 
{
	$(".raid ul").hide();
    $(".raid").hide();
    
    $(".wod").one("click", function() 
	{
        $(".wod ul li").slideDown(200);
    });
    
    $(".mop").one("click", function() 
	{
        $(".mop ul li").slideDown(200);
    });
    
    $(".hfc").click(function() 
	{
        $(".hfc").addClass('x');
        $(".hfc ul").slideToggle(200);
    });
    $(".soo").click(function() 
	{
        $(".soo ul").slideToggle(200);
    });
});

ul 
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#progress
{
    padding: 0;
    float: left;
    width: 200px;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    box-shadow: 2px 2px 2px 0px black;
    background-repeat: no-repeat;
}

h1
{
    margin-top: 8px;
    border-bottom: 4px solid #00c99a;
    padding-bottom: 4px;
}

.expansion
{
    text-align-last: center;
    width: inherit;
    height: 108px;
   
}

.expansion:first-child
{
    margin-top: -20px;
}

.mop, .wod
{
    width: inherit;
    height: inherit;
}

.wod > ul
{
 margin-top: 90px;   
}

.mop > ul
{
 margin-top: 90px;   
}

.wod
{
    border-bottom: 5px solid black;
    background-color: blue;
}

.mop
{

    border-bottom: 5px solid black;
    background-color: green;
}

.raid > ul
{
    padding-bottom: 10px;
}

h3
{
    font-size: 20px;  
    padding: 10px 0 10px 0;
}

.nhm
{
    display: inline-block;
    text-align: center;
    padding: 4px 20px 1px 20px;
    border: 2px solid white;
    border-radius: 50px;
    cursor: default;
    color: white;
    font-weight: 300;
}

.hfc-progress, .soo-progress,
{
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    cursor: default;
    color: white;
}

.hfc, .soo
{
    color: limegreen;
    background-color: rgba(37, 65, 23, 0.5);
}

.hfc:hover, .soo:hover
{
    cursor: pointer;
    color: greenyellow;
}

.x
{
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="progress"><h1>Progress</h1>
                <div id="expansion">
                    <ul>
                        <li class="expansion wod"><br />
                            <ul>
                                <li class="raid hfc"><h3>Hellfire Citadel ↓</h3>    
                                    <ul>
                                        <li class="hfc-progress">Hellfire Assault
                                            <ul>
                                                <li class="nhm hfcn">N</li>
                                                <li class="nhm hfch">H</li>
                                                <li class="nhm hfcm">M</li>
                                            </ul> 
                                          </li>
                                    </ul>
                                </li>
                              
                            </ul>
                        </li>   
                      
                        <li class="expansion mop"><br />
                        <ul>
                                <li class="raid soo"><h3>Siege of Orgrimmar↓</h3>    
                                    <ul>
                                        <li class="soo-progress">Immerseus
                                            <ul>
                                                <li class="nhm soon">N</li>
                                                <li class="nhm sooh">H</li>
                                                <li class="nhm soom">M</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                          
                        </ul>
                   </li>
              </ul>
       </div>
</div>

Answer 1

如果您确实想要隐藏元素，请使用CSS。 CSS可以具有类似

的属性

.raid ul { 
   display: none;
} 
.raid {
   display: none;
}

而不是在jQuery中调用hide()函数。这样，如果你在头部包含CSS并将JS保持在底部，则不会发生闪烁（因为浏览器会默认隐藏它们）

jQuery幻灯片/切换菜单

1 个答案: