子导航栏没有响应

Question

我正在使用 jQuery 编写带有子导航的导航栏，但遇到了很多问题：

首先子导航不能随导航缩放；

其次当鼠标在子导航上时，子导航不会停留，秒显示；

Third.I希望子导航也能有hovercss.

    <style type="text/css">
        *{margin:0; padding:0; font-size:14px;}
        .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
        .nav li{float:left}
        .nav li a{color:#333;text-decoration:none;display:block; height:30px;text-align:center; line-height:30px;
            width:80px; background:#efefef; margin-left:1px;}
        .nav li a.on, .nav li a:hover{background:#F60;color:#fff;}

        .subNav{ width:100%;height:0; overflow:hidden}
        .subNav li {clear: both;}
        .subNav li a{ background:#ddd }
        .subNav li a:hover{ background:#efefef}
        </style>
</head>
<body>
<ul class="nav">
    <li><a class="on a-first" href="#">首　　页</a>
        <ul class="subNav">
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a class="a-first" href="#">关于我们</a>
    </li>
    <li><a class="a-first" href="#">产品展示</a>
    </li>
    <li><a class="a-first" href="#">售后服务</a>
    </li>
    <li><a class="a-first" href="#">联系我们</a>
    </li>
</ul>
</body>

</html>

我试过几次了，但是failed.It对我来说似乎很复杂。这是JS代码：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>$(function () {
        $('a').hover(
            function () {
                $(this).stop().animate({"width":"160px"},200)
            },
            function () {
                $(this).stop().animate({"width":"120px"},200)
            }
        )

    })

    $(function () {
        $('.on').hover(
            function () {
                $('.subNav').stop().animate({"height":"190px"},300)
            }
        )
    })</script>

Answer 1

回应提到的个别问题。

First the sub nav can't scale with the nav;

子导航列表项的宽度由适用于导航和子导航的选择器 .nav li a 设置。应从此处删除宽度，并使用 .nav > li 等选择器仅将宽度应用于导航列表项。例如：

.nav > li{
  width: 80px;
}

subNav 中列表项的宽度应设置为 100%，这可以在 CSS 中现有的 .subNav li 选择器中完成。这确保它们在扩展/收缩时匹配导航栏的宽度。例如：

.subNav li {
  clear: both;
  /* Set width of list items to 100% */
  width: 100%;
}

Second when the mouse is on the sub nav,sub nav won't stay ,just display in seconds;

问题中提供的代码片段并未复制您为我描述的行为。 subNav 被显示并且从未被隐藏，因为没有事件将其高度降低回零。

但是，当鼠标悬停在 subNav 上时，JavaScript $('a').hover(... 中使用的选择器将不适用，因为 subNav 不是 a 标签的子项。使用像 $('.nav li').hover(... 这样的选择器将鼠标悬停在列表项 (li) 标记上，确保它在鼠标悬停在子导航上时继续应用。

显示和隐藏悬停在 subNav 上的代码也可以额外包含在这里，而不是它的当前位置，它只适用于具有 'on' class.[=29= 的导航列表项]

$(function() {
  $('.nav > li').hover(
    function() {
      //Increase width
      $(this).stop().animate({
        "width": "160px"
      }, 200);
      //Display subNav
            $(this).children('.subNav').stop().animate({
        "height": "190px"
      }, 200);
    },
    function() {
      //Reduce width
      $(this).stop().animate({
        "width": "80px"
      }, 200);
      //Hide subNav
            $(this).children('.subNav').stop().animate({
        "height": "0px"
      }, 200);
    }
  )
})

将 CSS 选择器 .nav li a:hover 修改为 .nav > li:hover > a 可确保将鼠标悬停在子导航上时导航项保持突出显示。例如：

.nav li a.on,
.nav > li:hover > a {
  background: #F60;
  color: #fff;
}

Third.I hope the sub nav can also have hover css.

您在示例中提供的悬停在 CSS 上以对子导航项着色的操作似乎按预期工作。

JavaScript 例子

此示例代码片段进行了上述修改（加上一些用于测试的新子导航项）。

$(function() {
  $('.nav > li').hover(
    function() {
      //Increase width
      $(this).stop().animate({
        "width": "160px"
      }, 200);
      //Display subNav
      $(this).children('.subNav').stop().animate({
        "height": "190px"
      }, 200);
    },
    function() {
      //Reduce width
      $(this).stop().animate({
        "width": "80px"
      }, 200);
      //Hide subNav
      $(this).children('.subNav').stop().animate({
        "height": "0px"
      }, 200);
    }
  )
})

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.nav {
  list-style: none;
  height: 30px;
  border-bottom: 10px solid #F60;
  margin-top: 20px;
  padding-left: 50px;
}

.nav li {
  float: left
}

.nav li a {
  color: #333;
  text-decoration: none;
  display: block;
  height: 30px;
  text-align: center;
  line-height: 30px;
  /* 
  Remove width from '.nav li a' selector 
  width: 80px;
  */
  background: #efefef;
  margin-left: 1px;
}


/*
Add new selector for setting width on nav list item
subNav will inherit width
*/

.nav>li {
  width: 80px;
}

/*
Amend second selector to cover hover over list item
*/
.nav li a.on,
.nav > li:hover > a {
  background: #F60;
  color: #fff;
}

.subNav {
  width: 100%;
  height: 0;
  overflow: hidden
}

.subNav li {
  clear: both;
  /* Set width of list items to 100% */
  width: 100%;
}

.subNav li a {
  background: #ddd
}

.subNav li a:hover {
  background: #efefef
}

<html>

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

<body>
  <ul class="nav">
    <li><a class="on a-first" href="#">Test 1</a>
      <ul class="subNav">
        <li><a href="#">Test 1.1</a></li>
        <li><a href="#">Test 1.2 </a></li>
      </ul>
    </li>
    <li><a class="a-first" href="#">Test 2</a>
    </li>
    <li><a class="a-first" href="#">Test 3</a>
      <ul class="subNav">
        <li><a href="#">Test 3.1</a></li>
        <li><a href="#">Test 3.2</a></li>
        <li><a href="#">Test 3.3</a></li>
        <li><a href="#">Test 3.4</a></li>
      </ul>
    </li>
    <li><a class="a-first" href="#">Test 4</a>
    </li>
    <li><a class="a-first" href="#">Test 5</a>
    </li>
  </ul>
</body>

</html>

CSS示例（无JavaScript）

我的首选方法是只使用 CSS 而没有任何 JavaScript。这也可以在没有 JavaScript 的情况下实现，如下面的代码片段所示。这需要进行测试以确保它满足您的浏览器兼容性要求。在此代码片段中，所有 JavaScript 代码已被删除，HTML 保持不变（除了一些用于测试的新 subNav 项目）并且 CSS 有许多 additions/amendments有相关评论描述。

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.nav {
  list-style: none;
  height: 30px;
  border-bottom: 10px solid #F60;
  margin-top: 20px;
  padding-left: 50px;
}

.nav li {
  float: left
}

.nav li a {
  color: #333;
  text-decoration: none;
  display: block;
  height: 30px;
  text-align: center;
  line-height: 30px;
  /* 
  Remove setting of width as this will be set on the list item (li) tag
  rather than the a tag
  width: 80px;
  */
  background: #efefef;
  margin-left: 1px;
}

/*
Adjust second selector for hover over list item (li) tag '.nav li:hover > a' rather than
hover over the a tag '.nav li a:hover'. This ensures the item remains highlighted whilst hovering
over the subNav
*/
.nav li a.on,
.nav li:hover>a {
  background: #F60;
  color: #fff;
}


/* 
Define initial width and width transition for the nav bar list items
*/
.nav>li {
  width: 80px;
  transition: width .2s
}

/*
When hovering over a nav bar list item increase its width, the transition
defined by the '.nav > li' selector will apply
*/
.nav>li:hover {
  width: 160px;
}

/*
When hovering over a nav bar list item display its subNav by increasing 
the subNavs max-height from 0 to a number higher than will be used.
The transition defined by the '.subNav' selector will apply
*/
.nav>li:hover .subNav {
  max-height: 200px;
}

.subNav {
  width: 100%;
  /*
  Max-height is used instead of height as the height of all subNav list items
  is not known. This may not be desirable as it gives a consistent transition 
  time regardless of the number of subNav list items.

  Instead of defining height as 0 defined max-height as 0.
  
  height: 0; 
  */
  max-height: 0px;
  /*
  Add transition for height
  */
  transition: max-height .2s;
  overflow: hidden
}

.subNav li {
  clear: both;
  /*
  Set width of list items to 100%
  */
  width: 100%;
}

.subNav li a {
  background: #ddd
}

.subNav li a:hover {
  background: #efefef
}

<html>

<body>
  <ul class="nav">
    <li>
      <a class="on a-first" href="#">Test 1</a>
      <ul class="subNav">
        <li><a href="#">Test 1.1</a></li>
        <li><a href="#">Test 1.2</a></li>
      </ul>
    </li>
    <li><a class="a-first" href="#">Test 2</a>
    </li>
    <li><a class="a-first" href="#">Test 3</a>
      <ul class="subNav">
        <li><a href="#">Test 3.1</a></li>
        <li><a href="#">Test 3.2</a></li>
        <li><a href="#">Test 3.3</a></li>
        <li><a href="#">Test 3.4</a></li>
      </ul>
    </li>
    <li><a class="a-first" href="#">Test 4</a>
    </li>
    <li><a class="a-first" href="#">Test 5</a>
    </li>
  </ul>
</body>

</html>

子导航栏没有响应

Sub navbar IS not responsive

jquery

nav

navbar