javascript - 隐藏的嵌套导航在悬停之前显示

Question

我使用列表作为导航，并使用 CSS 来设计“饮食”主页的水平导航/子页面的垂直导航。 我应用 JavaScript 来隐藏/显示导航中的子页面链接。它可以工作，但是当页面加载时，会显示 3 个链接 - 当我将鼠标悬停在“饮食”项目上后，它们会被隐藏。如果我再次悬停，它会再次显示并按预期工作。

基本上，如何确保这三个链接从一开始就隐藏？

提前谢谢您!

$(document).ready(function() {
  $("nav li:has(ul)").hover(function() {
    $(this).find("ul").slideDown();
  }, function() {
    $(this).find("ul").hide();
  });
});

.navUnordList {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navListElmnt {
  float: left;
  position: right;
  font-family: Verdana, sans-serif;
  font-size: 75%;
}

.navListElmntVert {
  list-style: none;
  text-align: left;
  font-size: 0.8em;
  margin: 0;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<nav>
  <ul class="navUnordList">
    <li class="navListElmnt"><a href="page2.html">Example</a></li>
    <li class="navListElmnt"><a href="page3.html">Diet</a>
      <ul class="navUnordList">
        <li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
        <li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
        <li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

只需在子菜单中添加一个 display: none 即可:

.navListElmnt > .navUnordList {
  display:none;
}

如果我可以表达个人观点的话，这些类名很糟糕，难以记住和书写。

$(document).ready(


	function()
{

	$("nav li:has(ul)").hover(
		function()
		{

		$(this).find("ul").slideDown();
		}
		,
		function()
		{
		$(this).find("ul").hide();
		});
}
);

.navUnordList{
  list-style:none;
  margin:0;
  padding:0;
  overflow:hidden;
}
.navListElmnt{
  float:left;
  position:right;
  font-family: Verdana, sans-serif;
  font-size: 75%;

}
.navListElmntVert{
  list-style: none;
  text-align: left;
  font-size: 0.8em;
  margin: 0;
  margin-bottom: 0.1em;
  margin-top:0.1em;
}
.navListElmnt > .navUnordList {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<nav>
      <ul class="navUnordList">

        <li class="navListElmnt"><a href="page2.html">Example</a></li>
        <li class="navListElmnt"><a href="page3.html">Diet</a>
            <ul class="navUnordList">
                <li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
                <li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
                <li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
            </ul>
        </li>
      
      </ul>
    </nav>