Question

我使用jQuery使用子导航编码导航栏但遇到了很多问题：

首先，子导航无法使用导航进行缩放;

当鼠标在子导航上时，子导航不会停留，只需在几秒钟内显示;

第三。我希望子导航也可以悬停css。

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

我已经尝试了几次，但都失败了。对我来说这似乎很复杂。这是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

回应上述个别问题。

首先，子导航无法使用导航进行缩放;

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

.nav > li{
  width: 80px;
}

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

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

当鼠标在子导航上时，子导航将不会停留，只需在几秒钟内显示;

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

然而，当鼠标悬停在subNav上时，由于子标记不是a $('a').hover(...时使用的选择器将不适用。使用$('.nav li').hover(...之类的选择器将悬停放置在列表项（li）标记上可确保将鼠标悬停在subNav上时继续应用。

此处还可以包含显示和隐藏悬停在subNav上的代码，而不是其当前位置，其中仅适用于带有“on”类的导航列表项。

$(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可确保将鼠标悬停在subNav上时，导航项仍会突出显示。例如：

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

第三。我希望子导航也可以悬停css。

您在示例中提供的用于为subnav项目着色的CSS上的鼠标悬停似乎可以按预期工作。

JavaScript示例

此示例代码段具有上述修订（以及一些用于测试的新subNav项目）。

$(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）

我首选的方法是在没有任何JavaScript的情况下使用CSS。这也可以在没有JavaScript的情况下实现，如下面的代码片段所示。这需要进行测试，以确保它符合您的浏览器兼容性要求。在此代码段中，所有JavaScript代码都已删除，HTML保持不变（除了一些新的subNav项目用于测试），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;
  /* 
  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>

子导航栏没有响应

1 个答案: