**Javascript+css+html 这个导航菜单轮动怎样能够顺利实现？有红包哦！！*

mikeflxca 2019-03-27 09:13:25
悬停在商品目录和商品目录1这两个主菜单时，其下级左右侧菜单显现，再继续悬停左侧菜单时，其相应的右侧导航子菜单显现。现在的问题是，只有一个主菜单“商品目录”时，已实现，但是有两个无法实现。

当悬停与商品目录时，左右侧菜单都显现，再依次悬停女装、女鞋、男装时，右侧子菜单以实现轮动显现，具体见下图1（IE浏览器下效果）：



当悬停于商品目录1时，刚开始时左右菜单都出现了，但继续悬停左侧的女装1、女鞋1、男装1时，右侧子导航菜单无法轮动显现。而且，过一会儿，只有左下侧菜单还显示，右下侧菜单完全不见了。
见下图2（IE浏览器下效果）：



我现在是硬把两个菜单框架拼放在一起，又硬生生在给第2个菜单的html码加了syle="margin-left:-358px;"让它靠左同一位置（同第一个菜单位置）。
估计应该把商品目录和商品目录1放在一个类框架下（如.sa .sbtn）,再用
js来完成，把代码最下端的js该下，应该可以实现要的效果。可俺js实在小白啊，哪位大侠出手帮看下，最好能直接改下代码。

叩谢！
看这里：
[b]p.s. 谁能改好我会之后发个红包！！[/b]
...全文
631 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
槿畔 2019-04-01
  • 打赏
  • 举报
 回复
引用 22 楼 mikeflxca 的回复:
[quote=引用 12 楼 mikeflxca 的回复:]
[quote=引用 11 楼 槿畔 的回复:]
兄弟，我尽力了。。。你再不理解，我也帮不了你，还是那句话，css足够解决联动问题


貌似可做，我先试下！[/quote]

已经实现纯css的多层次菜单联动，开始时显现的默认菜单背景色也可以在左侧菜单hover时去掉，并开始新的菜单hover背景变色轮动。
只是有个小瑕疵，就是在从主菜单（商品目录）hover过渡到左侧第一个菜单时（比如女装），该菜单的背景色有晃动。看来目前也只能接受这个瑕疵了。

还是非常感谢你的支持！

想发你红包但没你微信怎么发？？

祝愉快！[/quote]红包就不用了，弄明白了就好了
mikeflxca 2019-03-31
  • 打赏
  • 举报
 回复
引用 12 楼 mikeflxca 的回复:
[quote=引用 11 楼 槿畔 的回复:] 兄弟，我尽力了。。。你再不理解，我也帮不了你，还是那句话，css足够解决联动问题
貌似可做，我先试下！[/quote] 已经实现纯css的多层次菜单联动，开始时显现的默认菜单背景色也可以在左侧菜单hover时去掉，并开始新的菜单hover背景变色轮动。 只是有个小瑕疵，就是在从主菜单（商品目录）hover过渡到左侧第一个菜单时（比如女装），该菜单的背景色有晃动。看来目前也只能接受这个瑕疵了。 还是非常感谢你的支持！ 想发你红包但没你微信怎么发？？ 祝愉快！
luj_1768 2019-03-30
  • 打赏
  • 举报
 回复
是炒作吧？我觉得已经可以结贴了。不过很喜欢大家的讨论。。。
麦草CMS 2019-03-29
  • 打赏
  • 举报
 回复
引用 16 楼 mikeflxca 的回复:
[quote=引用 15 楼 麦草CMS 的回复:]
[quote=引用 14 楼 mikeflxca 的回复:]
默认粉色背景无法去除！类在.active上

没有javascript,不可能去掉[/quote]
那你有没有简单通用的js办法去掉背景，上一个？

考虑到很多地方要用，越简单越通用越好。我的js基本是白板。

谢了！[/quote]
还有你那复杂的css其实可以精简，要不了几行就行了。
麦草CMS 2019-03-29
  • 打赏
  • 举报
 回复
引用 16 楼 mikeflxca 的回复:
[quote=引用 15 楼 麦草CMS 的回复:]
[quote=引用 14 楼 mikeflxca 的回复:]
默认粉色背景无法去除！类在.active上

没有javascript,不可能去掉[/quote]
那你有没有简单通用的js办法去掉背景，上一个？

考虑到很多地方要用，越简单越通用越好。我的js基本是白板。

谢了！[/quote]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

  <meta charset="UTF-8">

  <title>测试页面</title>

 

<style type="text/css">

* {

  margin: 0;

  padding: 0;

  cursor: pointer;

}

a {

  font-family:Microsoft YaHei,Simsun;

  text-decoration:none;

   

}

.sa {

  float: left;

  margin-top: 121px;

  margin-left: 158px;

  position: relative;

  z-index: 9999;

  width: 200px;

  height: 500px;

}

.sbtn {

  position: relative;

  z-index: 10000;

}

 

.tnavContainer {

  border:0px solid;

  background-color: white;

  width:200px;

  position:relative;

  z-index:10001;

  height: 36px;

   

}

.tnav {

       float:left;

       width:180px;

       height:42px;

       font-size:14px;

       font-family:Microsoft YaHei,Simsun;

       line-height:42px;

       position:relative;

       z-index:10002;

       display:inline-block;

       text-align:center;

       border:1px solid;

       }

.tnav a {

    color:#444;

    }

.navHighlight {

          border:0px solid;

          position: absolute;

          z-index:10003;

              width:100%;

          height:2px;

          top:34px;

          left:0;

            background-color:#f56400;

          } 

 

 

.sa .sbtn ul {

  position: absolute;

  z-index: 10000;

  width: 210px;

  height: 400px;

  top: 42px;

  left: 0px;

  list-style: none;

  display: none;

  padding-top: 10px;

  background-color: #fff;

  border:1px solid #e1e3df;

}

.sa .sbtn ul li {

  padding-bottom: ;

  zoom: 1;

  clear: both;

}

.sa .sbtn ul li a {

  padding-left: 28px;

  font-size: 12px;

  margin-top: ;

  line-height: 44px;

  text-decoration: none;

  color: #444;

  white-space: nowrap;

}

 

.sa .sbtn ul li.active{

  background-color:#feefe5; 

}

 

.sa .sbtn:hover ul {

  display: block;

}

.sa .sbtn ul li:hover .active {

  background-color:transparent;

}

.sa .sbtn ul li:hover {

  background-color: #feefe5;

}

 

 

.sa .sbtn ul li:hover a,.sa .sbtn ul li.active a {

  color: #666;

}

.right-menu {

  display: none;

  width: 820px;

  height: 400px;

  border:1px solid #e1e3df;

  border-right:1px solid #e1e3df;

  border-bottom:1px solid #e1e3df;

  background-color: #fff;

  position: absolute;

  top: 0px;

  left: 210px;

}

.sa .sbtn ul li .right-menu a {

          padding-left:0px;

             padding-right:18px;

          line-height:42px;

          }

.sa .sbtn ul li .right-menu dl {

                padding-left:32px;

                  width:662px;

                border:0px solid;

                padding-top:13px;

                }

 

.sa .sbtn ul li:hover .right-menu {

    display:block;

}

.s1>div{

  position: absolute;

  left: 210px;

  width: 820px;

}

.show{

  display:block;

}

</style>

</head>

<body>

  <div class="sa">

    <div class="sbtn">

      <div class="tnavContainer">

    <div class="tnav">

        <span><a href="#">商品目录</a></span>    

    </div>

      </div>

      <ul>

        <li class="s1 active"><a href="#">女装</a>

          <div class="right-menu show">

            <dl>

          <dd>

                <a href="#">针织衫</a>

                <a href="#">T恤</a>

                <a href="#">毛衣</a>

                <a href="#">衬衫</a>

                <a href="#">半身裙</a>

                <a href="#">长裙</a>

                <a href="#">短裙</a>

                <a href="#">风衣</a>

                <a href="#">卫衣</a>

                <a href="#">短外套</a>

                <a href="#">夹克</a>

                <a href="#">裤子</a>

                <a href="#">西装</a>

                <a href="#">大码女装</a>

                <a href="#">妈妈装</a>

                <a href="#">旗袍</a>

                <a href="#">唐装</a>

                <a href="#">休闲裤</a>

                <a href="#">阔脚裤</a>

                <a href="#">牛仔裤</a>

                <a href="#">短裤</a>

                <a href="#">打底衫</a>

                <a href="#">打底裤</a>

                <a href="#">吊带</a>

                <a href="#">内衣</a>

                <a href="#">皮衣</a>

                <a href="#">皮草</a>

                <a href="#">礼服</a>

                <a href="#">舞台装</a>

                <a href="#">套装</a>

              </dd>

            </dl>

          </div>

        </li>

        <li class="s1">

 

          <a href="#">女鞋</a>

                                                        

          <div class="right-menu">

            <dl>

              <dd>

                <a href="#">高跟鞋</a>

        <a href="#">坡跟鞋</a>

        <a href="#">平底鞋</a>

        <a href="#">尖头</a>

        <a href="#">方头</a>

        <a href="#">马丁靴</a>

        <a href="#">女靴</a>

        <a href="#">帆布鞋</a>

        <a href="#">凉鞋</a>

        <a href="#">布鞋</a>

        <a href="#">绣花鞋</a>

        <a href="#">坡跟鞋</a>

        <a href="#">雪靴</a>

        <a href="#">一脚蹬</a>    

              </dd>

            </dl>

          </div>

        </li>

        <li class="s1"><a href="#">男装</a>

          <div class="right-menu">

            <dl>

              <dd>

            <a href="#">男装</a>

              </dd>

            </dl>

          </div>

        </li>

      </ul>

    </div>

  </div>

  <script type="text/javascript">

  var current = document.querySelector(".s1");

  document.querySelector(".tnav").addEventListener("mouseover", function(){

	current.className = "s1 active";

  });

  

  Object.values(document.querySelectorAll(".s1")).forEach( function(val){

	val.addEventListener("mouseout", function(e){

		e.target.className = "s1";

	});

  });

  Object.values(document.querySelectorAll(".s1")).forEach( function(val){

	val.addEventListener("mouseover", function(e){

		e.target.className = "s1 active";

	});

  });

  </script> 

</body>

 

</html>
mikeflxca 2019-03-29
  • 打赏
  • 举报
 回复
引用 8 楼 槿畔 的回复:
至于颜色问题，原理一致的，只要左侧栏包含菜单的大块（女鞋，男鞋他们的父dom）：hover 下边的女装颜色变为默认，划过女装和其他（如男鞋）颜色变为选中的颜色。。。。。主要是利用了，css的优先级，样式的替换。。。怎么会是只有js才能解决呢
加我微信： mikefeng11
mikeflxca 2019-03-29
  • 打赏
  • 举报
 回复
引用 11 楼 槿畔 的回复:
兄弟，我尽力了。。。你再不理解，我也帮不了你，还是那句话，css足够解决联动问题
今天重新做了一个顶部多菜单下部左右侧都有菜单的测试菜单，现已经完全实现纯css轮动。但有一个问题：就是默认第一个菜单，在上例中是女装（非今天的测试菜单）的默认粉色背景在向下hover到女鞋男装时，背景要求消失的，但当前消失不了。这个怎么解决？不用js行不？如果要用js，怎么写？ 如果必须用js, 请用最简单通用的写法。 谢谢！周末愉快！ 红包回头发。 请私信我
mikeflxca 2019-03-29
  • 打赏
  • 举报
 回复
引用 15 楼 麦草CMS 的回复:
[quote=引用 14 楼 mikeflxca 的回复:] 默认粉色背景无法去除！类在.active上
没有javascript,不可能去掉[/quote] 那你有没有简单通用的js办法去掉背景，上一个？ 考虑到很多地方要用，越简单越通用越好。我的js基本是白板。 谢了！
麦草CMS 2019-03-29
  • 打赏
  • 举报
 回复
引用 14 楼 mikeflxca 的回复:
默认粉色背景无法去除！类在.active上

没有javascript,不可能去掉
mikeflxca 2019-03-29
  • 打赏
  • 举报
 回复
默认粉色背景无法去除！类在.active上
mikeflxca 2019-03-29
  • 打赏
  • 举报
 回复
引用 12 楼 mikeflxca 的回复:
[quote=引用 11 楼 槿畔 的回复:] 兄弟，我尽力了。。。你再不理解，我也帮不了你，还是那句话，css足够解决联动问题
貌似可做，我先试下！[/quote] 你好，轮动已经实现！但是默认背景图无法去除，见下图： Hover到女装以下的菜单时（比如如图中停在男装上），我试了改变.active的类，但仍去除不了。 帮忙看一下，怎么去除它？最好直接改一下吧！ 代码如下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>测试页面</title>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
a {
  font-family:Microsoft YaHei,Simsun;
  text-decoration:none;
  
}
.sa {
  float: left;
  margin-top: 121px;
  margin-left: 158px;
  position: relative;
  z-index: 9999;
  width: 200px;
  height: 500px;
}
.sbtn {
  position: relative;
  z-index: 10000;
}

.tnavContainer {
  border:0px solid;
  background-color: white;
  width:200px;
  position:relative;
  z-index:10001;
  height: 36px;
  
}
.tnav {
       float:left;
       width:180px;
       height:42px;
       font-size:14px;
       font-family:Microsoft YaHei,Simsun;
       line-height:42px;
       position:relative;
       z-index:10002;
       display:inline-block;
       text-align:center;
       border:1px solid;
       }
.tnav a {
	color:#444;
	}
.navHighlight {
	      border:0px solid;
	      position: absolute;
	      z-index:10003;
              width:100%;
	      height:2px;
	      top:34px;
	      left:0;
  	      background-color:#f56400;
	      } 


.sa .sbtn ul {
  position: absolute;
  z-index: 10000;
  width: 210px;
  height: 400px;
  top: 42px;
  left: 0px;
  list-style: none;
  display: none;
  padding-top: 10px;
  background-color: #fff;
  border:1px solid #e1e3df;
}
.sa .sbtn ul li {
  padding-bottom: ;
  zoom: 1;
  clear: both;
}
.sa .sbtn ul li a {
  padding-left: 28px;
  font-size: 12px;
  margin-top: ;
  line-height: 44px;
  text-decoration: none;
  color: #444;
  white-space: nowrap;
}

.sa .sbtn ul li.active{
  background-color:#feefe5; 
}

.sa .sbtn:hover ul {
  display: block;
}
.sa .sbtn ul li:hover .active {
  background-color:transparent;
}
.sa .sbtn ul li:hover {
  background-color: #feefe5;
}


.sa .sbtn ul li:hover a,.sa .sbtn ul li.active a {
  color: #666;
}
.right-menu {
  display: none;
  width: 820px;
  height: 400px;
  border:1px solid #e1e3df;
  border-right:1px solid #e1e3df;
  border-bottom:1px solid #e1e3df;
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 210px;
}
.sa .sbtn ul li .right-menu a {
		  padding-left:0px;
  	 	  padding-right:18px;
		  line-height:42px;
		  }
.sa .sbtn ul li .right-menu dl {
				padding-left:32px;
			  	width:662px;
				border:0px solid;
				padding-top:13px;
				}

.sa .sbtn ul li:hover .right-menu {
	display:block;
}
.s1>div{
  position: absolute;
  left: 210px;
  width: 820px;
}
.show{
  display:block;
}
</style>
</head>
<body>
  <div class="sa">
    <div class="sbtn">
      <div class="tnavContainer">
	<div class="tnav">
        <span><a href="#">商品目录</a></span>	
	</div>
      </div>
      <ul>
        <li class="s1 active"><a href="#">女装</a>
          <div class="right-menu show">
            <dl>
	      <dd>
                <a href="#">针织衫</a>
                <a href="#">T恤</a>
                <a href="#">毛衣</a>
                <a href="#">衬衫</a>
                <a href="#">半身裙</a>
                <a href="#">长裙</a>
                <a href="#">短裙</a>
                <a href="#">风衣</a>
                <a href="#">卫衣</a>
                <a href="#">短外套</a>
                <a href="#">夹克</a>
                <a href="#">裤子</a>
                <a href="#">西装</a>
                <a href="#">大码女装</a>
                <a href="#">妈妈装</a>
                <a href="#">旗袍</a>
                <a href="#">唐装</a>
                <a href="#">休闲裤</a>
                <a href="#">阔脚裤</a>
                <a href="#">牛仔裤</a>
                <a href="#">短裤</a>
                <a href="#">打底衫</a>
                <a href="#">打底裤</a>
                <a href="#">吊带</a>
                <a href="#">内衣</a>
                <a href="#">皮衣</a>
                <a href="#">皮草</a>
                <a href="#">礼服</a>
                <a href="#">舞台装</a>
                <a href="#">套装</a>
              </dd>
            </dl>
          </div>
        </li>
        <li class="s1">

          <a href="#">女鞋</a>
                                                       
          <div class="right-menu">
            <dl>
              <dd>
                <a href="#">高跟鞋</a>
		<a href="#">坡跟鞋</a>
		<a href="#">平底鞋</a>
		<a href="#">尖头</a>
		<a href="#">方头</a>
		<a href="#">马丁靴</a>
		<a href="#">女靴</a>
		<a href="#">帆布鞋</a>
		<a href="#">凉鞋</a>
		<a href="#">布鞋</a>
		<a href="#">绣花鞋</a>
		<a href="#">坡跟鞋</a>
		<a href="#">雪靴</a>
		<a href="#">一脚蹬</a>	
              </dd>
            </dl>
          </div>
        </li>
        <li class="s1"><a href="#">男装</a>
          <div class="right-menu">
            <dl>
              <dd>
	        <a href="#">男装</a>
              </dd>
            </dl>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
</body>

</html>
mikeflxca 2019-03-28
  • 打赏
  • 举报
 回复
引用 11 楼 槿畔 的回复:
兄弟，我尽力了。。。你再不理解，我也帮不了你，还是那句话，css足够解决联动问题
貌似可做，我先试下！
麦草CMS 2019-03-27
  • 打赏
  • 举报
 回复
简单的问题，你把它描述的那么复杂！！！
还有，不就是联动嘛，你把它描述的难比登天！
槿畔 2019-03-27
  • 打赏
  • 举报
 回复
css就能实现，你先用position定好位置，display：none设置隐藏，最后hover鼠标滑过的时候设置对应的div块display：block；；；完全用不到js
槿畔 2019-03-27
  • 打赏
  • 举报
 回复
兄弟，我尽力了。。。你再不理解，我也帮不了你，还是那句话，css足够解决联动问题
槿畔 2019-03-27
  • 打赏
  • 举报
 回复


引用 9 楼 mikeflxca 的回复:
[quote=引用 7 楼 槿畔 的回复:]
[quote=引用 4 楼 mikeflxca 的回复:]
[quote=引用 1 楼 槿畔 的回复:]
css就能实现，你先用position定好位置，display：none设置隐藏，最后hover鼠标滑过的时候设置对应的div块display：block；；；完全用不到js


如果是只有2级子菜单可以用你的方法，现在是3级，也就是说在左右侧菜单显示后（默认显示女装下的导航菜单），如果不用js，那么再hover到左侧女鞋和男装菜单时，右侧相应菜单就被前面显示的菜单挡住了，实现不了轮动！！[/quote]你想默认显示女装下的导航菜单，默认的就把女装设为display：block；hover划过其他的时候把第女装设为display：none；对应的设为display：block；。。。。然后你又该问我了怎么hover其他类型的时候让女装对应的菜单消失呢？你可以把左侧包含菜单的大块（女鞋，男鞋他们的父dom）设置一个hover，hover的时候右边的菜单全部是display：none的状态，对应的子dom（女鞋，男鞋）划过的时候对应的右侧菜单显示就好了啊。。。。。这里就相当于是模拟了一个在hover出现右侧菜单之前清除了所有右侧菜单。。。。不知道这样解释你明白了没有[/quote]
我想是先出现女装菜单时，右下侧的导航菜单也同时出现，不是只有女装display:block就好了。那么当父级菜单下的孙级菜单，也就是右下侧的菜单也可以设置hover父级菜单（商品目录）时，与子级菜单女装同时显现吗？

[/quote]我的意思就是女装对应的右下侧的导航菜单默认设置成block啊，左侧那一大块本身就是划过出现，，，前两句话女装加上‘对应的菜单’你再捋一遍我的意思。。
mikeflxca 2019-03-27
  • 打赏
  • 举报
 回复
引用 7 楼 槿畔 的回复:
[quote=引用 4 楼 mikeflxca 的回复:] [quote=引用 1 楼 槿畔 的回复:] css就能实现，你先用position定好位置，display：none设置隐藏，最后hover鼠标滑过的时候设置对应的div块display：block；；；完全用不到js
如果是只有2级子菜单可以用你的方法，现在是3级，也就是说在左右侧菜单显示后（默认显示女装下的导航菜单），如果不用js，那么再hover到左侧女鞋和男装菜单时，右侧相应菜单就被前面显示的菜单挡住了，实现不了轮动！！[/quote]你想默认显示女装下的导航菜单，默认的就把女装设为display：block；hover划过其他的时候把第女装设为display：none；对应的设为display：block；。。。。然后你又该问我了怎么hover其他类型的时候让女装对应的菜单消失呢？你可以把左侧包含菜单的大块（女鞋，男鞋他们的父dom）设置一个hover，hover的时候右边的菜单全部是display：none的状态，对应的子dom（女鞋，男鞋）划过的时候对应的右侧菜单显示就好了啊。。。。。这里就相当于是模拟了一个在hover出现右侧菜单之前清除了所有右侧菜单。。。。不知道这样解释你明白了没有[/quote] 我想是先出现女装菜单时，右下侧的导航菜单也同时出现，不是只有女装display:block就好了。那么当父级菜单下的孙级菜单，也就是右下侧的菜单也可以设置hover父级菜单（商品目录）时，与子级菜单女装同时显现吗？
槿畔 2019-03-27
  • 打赏
  • 举报
 回复
至于颜色问题，原理一致的，只要左侧栏包含菜单的大块（女鞋，男鞋他们的父dom）：hover 下边的女装颜色变为默认，划过女装和其他（如男鞋）颜色变为选中的颜色。。。。。主要是利用了，css的优先级，样式的替换。。。怎么会是只有js才能解决呢
槿畔 2019-03-27
  • 打赏
  • 举报
 回复
引用 4 楼 mikeflxca 的回复:
[quote=引用 1 楼 槿畔 的回复:]
css就能实现，你先用position定好位置，display：none设置隐藏，最后hover鼠标滑过的时候设置对应的div块display：block；；；完全用不到js


如果是只有2级子菜单可以用你的方法，现在是3级，也就是说在左右侧菜单显示后（默认显示女装下的导航菜单），如果不用js，那么再hover到左侧女鞋和男装菜单时，右侧相应菜单就被前面显示的菜单挡住了，实现不了轮动！！[/quote]你想默认显示女装下的导航菜单，默认的就把女装设为display：block；hover划过其他的时候把第女装设为display：none；对应的设为display：block；。。。。然后你又该问我了怎么hover其他类型的时候让女装对应的菜单消失呢？你可以把左侧包含菜单的大块（女鞋，男鞋他们的父dom）设置一个hover，hover的时候右边的菜单全部是display：none的状态，对应的子dom（女鞋，男鞋）划过的时候对应的右侧菜单显示就好了啊。。。。。这里就相当于是模拟了一个在hover出现右侧菜单之前清除了所有右侧菜单。。。。不知道这样解释你明白了没有
mikeflxca 2019-03-27
  • 打赏
  • 举报
 回复
引用 5 楼 槿畔 的回复:
[quote=引用 4 楼 mikeflxca 的回复:] [quote=引用 1 楼 槿畔 的回复:] css就能实现，你先用position定好位置，display：none设置隐藏，最后hover鼠标滑过的时候设置对应的div块display：block；；；完全用不到js
如果是只有2级子菜单可以用你的方法，现在是3级，也就是说在左右侧菜单显示后（默认显示女装下的导航菜单），如果不用js，那么再hover到左侧女鞋和男装菜单时，右侧相应菜单就被前面显示的菜单挡住了，实现不了轮动！！[/quote]哪怕是四级五级也是一样的，均可以实现，都是联动而已。再hover到左侧女鞋和男装菜单时，右侧相应菜单怎么会被前面显示的菜单挡住了？？[/quote] 是这样的：有个特殊要求，就是在首次hover商品目录时，默认左侧所有菜单显现，同时默认菜单“女装”是有颜色背景的，同时默认右侧的菜单是自动显现的（还没hover"女装“菜单时就已经显现）。之后再hover女鞋、男装时右侧轮动。要满足这些要求，不用js做不了！你再好好看看。
加载更多回复（3）
Web前端速成(Html+Css+JavaScript+jQuery)
讲解了html、css的知识点和运用，初步介绍了JavaScript和jQuery对页面元素的操作,以及在jQuery框架下 Ajax如何实现前后台数据的交互。 教学思路是先认识完整流程,再抓细节，细节在模仿案例编写中逐步理解并熟悉。 ...
提高页面加载速度的神器--页面静态化技术
一、简介 网站的web前端要实现高效，第一个要解决的短板就是网络的延迟性对网站的加载效率的影响，当然很多人会说网速快不快这是网络运营商的问题，不是网站的问题，但是大家肯定也见过就算我们用上了千兆宽带也会有些网站加载速度慢的让人无法忍受，网站本身的确是没法控制网络速度的能力，但是如果我们不降低网络对页面加载效率的影响，其他任何优化网站的手段也就无从谈起，原因就是网络效率对于网页加载效率的影响...
小程序 学习。。。[个人感觉吧 官方文档写的相当详细了。。]
作者：初雪 链接：https://www.zhihu.com/question/50907897/answer/128494332 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 一：推荐地址集合：（初入门者请
超详细【百分百拿offer】的面试教程，集合5000多家软件测试公司面试题。
3.4 有没有写过测试计划，具体包括哪些内容?参考答案1：测试计划内容：(1)目的和范围 (2)规程 (3)测试方案和方法 (4)测试的准入和准出(5)测试计划(流程、时间安排、对应人员) (6)测试的环境配置和人员安排 (7)交付件参考答案2我们公司之前按照考核要求写过测试计划，不过后面老大觉得太耽误工作进度，后面一般都不再写测试计划，而是写版本计划，这个在版本计划，每个人的任务列出来，负责人列出来，自己根据自己的情况分配时间，然后汇总，大家一起开个小会评审就可以了。
android安卓源码海量项目合集打包-1
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
JavaScript

87,921

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章