Question

我使用列表作为导航和CSS来设计主页/垂直导航的水平导航，用于＆＃34; Diet＆＃34;的子页面。我应用JavaScript来隐藏/显示导航中的子页面链接。它可以工作，但是当页面加载时，会显示3个链接 - 在我徘徊在项目之后＆＃34; Diet＆＃34;它们是隐藏的。如果我再次悬停，则会再次显示并按预期工作。

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

提前谢谢！

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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中使用相同的逻辑，这是首选，因为它的硬件加速。试试这个：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

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

3 个答案: