悬停前显示隐藏的嵌套导航

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>

Answer 2

要隐藏开始的选项，您可以在 CSS 中将它们设置为 display: none。

另外请注意，JS 是多余的，因为您可以在 CSS 中拥有相同的逻辑，这是首选，因为它是硬件加速的。试试这个：

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

.navUnordList li ul li {
  display: none;
}

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

.navListElmnt:hover > ul > li {
  display: block;
}

.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</a></li>
        <li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</a></li>
        <li class="navListElmntVert"><a href="page3-3.html">Nutrition</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

您实际上可以为此使用仅 CSS 的解决方案。默认保持高度 0px 并使其在悬停时自动保持如下：

.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 {
  height: 0px;
}

.navListElmnt:hover>.navUnordList {
  height: auto;
}

<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</a> </li>
        <li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</a></li>
        <li class="navListElmntVert"><a href="page3-3.html">Nutrition</a></li>
      </ul>
    </li>
  </ul>
</nav>

注意：这确实去掉了height:auto的向下滑动动画cos

但你也可以有动画版本，如果你准备好像这样测量每个子菜单的高度：

.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 {
  height: 0px;
  transition: all 0.2s ease;
}

.navListElmnt:hover>.navUnordList {
  height: 50px;
}

<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</a> </li>
        <li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</a></li>
        <li class="navListElmntVert"><a href="page3-3.html">Nutrition</a></li>
      </ul>
    </li>
  </ul>
</nav>