web前端开发之二级菜单的隐藏和展开

最新推荐文章于 2023-11-29 14:45:38 发布
最新推荐文章于 2023-11-29 14:45:38 发布
阅读量5.1k 收藏 2
点赞数
分类专栏： ----------前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36936155/article/details/72616813
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>caidan</title>
	<style>
		#navigation{
			width: 200px;
			height: 1000px;
			float: left;

		}
		#navigation>ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px;

		}
		#navigation>ul>li{
			border-bottom: 5px soild #ED9F9F;
		}
		#navigation>ul>li>a{
			display: block;
			padding: 5px 5px 5px 0.5em;
			text-decoration: none;
			border-left: 12px soild #711515;
			border-left: 1px soild #711515;
		}
		#navigation>ul>li>a:link,#navigation>ul>li>a:visited{
			background-color: #c11136;
			color: #FFFFFF;

		}
		#navigation >ul>li>a:hover{
			background-color: #990020;
			color: #ffff00;
		}
		#navigation ul li ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px 0px 0px 0px;

		}
		#navigation ul li ul li{
			border-top: 1px solid #ED9F9F;
		}
		#navigation ul li ul li a{
			display: block;
			padding: 3px 3px 3px 0.5em;
			text-decoration:none;
			border-left: 28px solid #a71f1f;
			border-right:1px solid #711515;
		}
		#navigation ul li a:link,#navigation ul li li a:visited{
			background-color: #e85070;
			color: #FFFFFF;
		}
		#navigation ul li ul li a:hover{
			background-color: #c2425d;
			color: #ffff00;
		}
		#navigation ul li ul.myHide{
			display: none;
		}
		#navigation ul li ul.myShow{
			display: block;
		}
	</style>
	<script>
		window.οnlοad=function(){
			var oUl = document.getElementById("listUL");
			var aLi = oUl.childNodes;//获取所有子元素返回一个子元素节点集合包括#text节点，在DOM中，文本也是一个节点，类型为DOM Text，包含进去了每个li节点前面的文本节点"回车 "，即一个回车后面跟很多空格
			var oA;
			for(var i = 0;i<aLi.length;i++){

				if (aLi[i].tagName=="LI"&&aLi[i].getElementsByTagName("ul").length) {//找到同时满足标签名为li和返回带有ul标签名的对象的长度不为空的li节点
					oA = aLi[i].firstChild;//获得a标签
					oA.onclick = change;//给a标签绑定事件
				}
			}
		}
		function change(){
			var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//找到
			if (oSecondDiv.className=="myHide") {
				oSecondDiv.className="myShow";
			}else{
				oSecondDiv.className="myHide";
			}
		}
	</script>
</head>
<body>
	<div id="navigation">
		<ul id="listUL">
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a>
			<ul class="myHide">
				<li><a href="#">Lastest News</a></li>
					<li><a href="#">All News</a></li>
				</ul>
			</li>
			<li><a href="#">Sports</a>
			<ul class="myHide">
				<li><a href="#">Basketball</a></li>
					<li><a href="#">Football</a></li>
						<li><a href="#">Volleyball</a></li>
				</ul>
			</li>
			<li><a href="#">Weather</a>
			<ul class="myHide">
				<li><a href="#">Today's Weather</a></li>
					<li><a href="#">Forecast</a></li>
				
				</ul>
			</li>
			<li><a href="#">Contact Me</a></li>
		</ul>
	</div>
</body>
</html>








                

        

        

    




    

      

        

            

              
                
                  萧凝云
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
前端二级菜单 - 网页轮播图

				
			

			

				

					12-30
				

			

		

		

			
				
纯前端js + css实现，有图片自动轮播效果，可以根据需要替换图片素材。
有鼠标滑动二级展开效果，支持顶部导航展开以及左侧详细类别展开。

			
		

	



                

              
                



	

		

			

				
					
CSS层折叠(或收缩)与展开特效

				
			

			

				

					05-22
				

			

		

		

			
				
CSS层折叠(或收缩)与展开特效CSS层折叠(或收缩)与展开特效CSS层折叠(或收缩)与展开特效CSS层折叠(或收缩)与展开特效

			
		

	



                


  
              

                


	

		

			

				
					
菜单栏的隐藏与显示

				
			

			

				

					weixin_44585066的博客
				

				

					08-22
					
					785
					
				

			

		

		

			
				
首先需要配置jquery，不然会报错，达不到效果的，如果项目中早就下载了，那就往下看
1在package.json文件中的"dependencies": 下加入以下配置之后会出现install，下载即可
“jquery”: “^3.4.1”,

2之后在main.js中导入jquery
import $ from ‘jquery’

3在webpack.base.conf.js文件下导入以下配置
...

			
		

	





	

		

			

				
					
前端:实现二级菜单（点击实现二级菜单展开）

				
			

			

				

					weixin_46001736的博客
				

				

					11-29
					
					853
					
				

			

		

		

			
				
前端:实现二级菜单（点击实现二级菜单展开）

			
		

	



		

			
		



	

		

			

				
					
前端用显示隐藏样式实现三级菜单的效果（display实现）

				
			

			

				

					weixin_45096939的博客
				

				

					11-21
					
					500
					
				

			

		

		

			
				
style.border="0px solid #fff"  （隐藏之后占位）（2）.style.visibility="hidden"  （隐藏之后占位）（1）.style.display="none" （隐藏之后不占位）（3）.style.opacity=0  （隐藏之后占位）

			
		

	





	

		

			

				
					
关于二级导航栏如何隐藏和显示

				
			

			

				

					deartors的博客
				

				

					10-16
					
					2218
					
				

			

		

		

			
				
隐藏使用display: none;属性，显示使用伪类选择器.item:hover ul
display: block
}

			
		

	





	

		

			

				
					
Web 学习之侧边隐藏菜单栏

				
			

			

				

					程序员小白的博客
				

				

					01-04
					
					1252
					
				

			

		

		

			
				
制作侧边菜单栏

			
		

	





	

		

			

				
					
原生前端实现菜单隐藏下拉功能及通过pid号进行线程控制问题

				
			

			

				

					weixin_47777564的博客
				

				

					09-27
					
					249
					
				

			

		

		

			
				
15指令是正常结束进程，如果该线程已没有任何意义，我们就写入9指令，强制结束进程。每个线程都有一个代号，我们成为pid号，我们通过这个代号可以指定线程的操作。首先在html文件下，我们在隐藏子菜单的母选项上，我们定义类em。那么我们在css文件中，即可分出二级菜单与三级菜单，如图所示。pid号可以指代线程做很多操作，我们就杀死线程来做示范，然后我们在二级菜单定义类为ul，三级菜单定义类为li。就可以查询指定端口号的线程pid了。即可完成原生实现菜单下拉的功能。问题二：线程pid号的查询。

			
		

	





	

		

			

				
					
HTML5自动隐藏菜单,jQuery和CSS3可自动隐藏的导航菜单设计

				
			

			

				

					weixin_34061440的博客
				

				

					05-31
					
					708
					
				

			

		

		

			
				
这是一款非常实用的jQuery和CSS3可自动隐藏的导航菜单设计。该设计中，导航菜单在页面向下滚动时会自动进行隐藏，在页面向上滚动时，菜单又会自动出现。使用方法HTML结构该导航菜单设计的HTML结构包含几个部分：header.cd-auto-hide-header是主导航菜单。main.cd-main-content是页面的主体内容。如果页面中包含二级子菜单，那么在中还有一个nav.cd-sec...

			
		

	





	

		

			

				
					
网页左侧导航栏二级菜单的显示隐藏

				
			

			

				

					帝一松鼠的博客
				

				

					03-20
					
					2865
					
				

			

		

		

			
				
初学者想做出这样的效果，可以跟着这给b站up的视频做

侧边导航栏实现，手把手超详细！_哔哩哔哩_bilibilim​​​​​​​zhttps://www.bilibili.com/video/BV14y4y1a7Ld?spm_id_from=333.880.my_history.page.click真的蛮详细的，不过后面点击一级菜单显示或隐藏二级菜单，简单一点来实现直接在，js里写if语句就好了，截图放这里



”shezhi"是我的一级菜单id。content是我的二级菜单整个。biaoz...

			
		

	





	

		

			

				
					
前台项目21二三级分类vue2展示

				
			

			

				

					liu12333322的博客
				

				

					08-01
					
					174
					
				

			

		

		

			
				
二三级分类vue2展示

			
		

	





	

		

			

				
					
Web前端开发之二级菜单加轮播图：基于HTMLCSSJS的网页布局与交互设计.txt

					
最新发布

				
			

			

				

					01-08
				

			

		

		

			
				
本资源是一本Web前端开发之二级菜单加轮播图的网页布局与交互设计教程，旨在通过HTML/CSS/JS这三种基础的网页开发语言，来实现一个具有二级菜单导航和图片轮播效果的网页，涵盖了网页的结构、样式、行为等内容，以及...

			
		

	





	

		

			

				
					
纯CSS制作二级导航下拉列表

				
			

			

				

					04-30
				

			

		

		

			
				
网页制作前端用纯CSS制作二级导航，用最简单的CSS样式实现二级导航下拉列表，html和css样式简洁清晰，一看就会，拿来就能直接用。

			
		

	





	

		

			

				
					
jQuery垂直二级导航菜单代码

				
			

			

				

					11-20
				

			

		

		

			
				
jQuery垂直二级导航菜单代码

			
		

	





	

		

			

				
					
二级下拉列表联动 select 网页 html5

				
			

			

				

					03-30
				

			

		

		

			
				
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！

			
		

	





	

		

			

				
					
move-div.zip

				
			

			

				

					01-18
				

			

		

		

			
				
CSS之旋转出现的li列表的炫酷二级菜单

			
		

	





	

		

			

				
					
web前端之自动提示的文本框

				
			

			

				

					编程的取经之路
				

				

					05-23
					
					4565
					
				

			

		

		

			
				
首先说一下思路，通过给文本框绑定键盘输入事件，来给div下的ul元素添加子元素，实际的应用情况应该为输入数据ajax到服务器返回输入信息的模糊查询（根据热度之类的总之是动态数据），返回数据并添加到ul下作为子元素，这里直接用了一个aColors作为库用来匹配输入项
理一理整个程序的脉络
监听键盘输入事件，初始化全局变量，如果输入的信息和aColors单词表中的单词从第一个字母开始匹配那么把这个

			
		

	





	

		

			

				
					
深入学习js之浅谈作用域（RHS和LHS）

				
			

			

				

					编程的取经之路
				

				

					08-09
					
					2924
					
				

			

		

		

			
				
1.作用域是什么，它拿来做什么用？
引用你不知道的JS中的概念。
首先几乎所有语言的最基本功能之一就是存储变量中的值，并且能在之后对这个值进行访问或修改。那么这些变量存储在哪里，程序需要时如何找到他们。
这些问题说明需要一套设计良好的原则来存储变量，并且之后可以方便地找到这些变量，这套规则被称为作用域。


这里引入一个题外话，程序的源代码在执行之前会经历三个步骤1.分词/词法分析2.

			
		

	





	

		

			

				
					
web前端中二级横向下拉菜单怎么做

				
			

			

				

					05-28
				

			

		

		

			
				
实现二级横向下拉菜单的方法有多种，以下是其中一种常见的实现方式：

1. HTML结构：

```html
<ul class="menu">
  <li><a href="#">菜单1</a>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a>
    <ul>
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
    </ul>
  </li>
  <li><a href="#">菜单4</a></li>
</ul>
```

2. CSS样式：

```css
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  float: left;
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 10px;
  background-color: #ccc;
  color: #000;
  text-decoration: none;
}

.menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

.menu ul li {
  float: none;
}

.menu ul li a {
  white-space: nowrap;
}

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

.menu ul ul {
  top: 0;
  left: 100%;
}
```

3. JavaScript代码：

```javascript
// 可选：使用 JavaScript 实现鼠标悬停后下拉菜单的延迟效果
var timeoutId;
var delay = 250;

var hoverIn = function() {
  clearTimeout(timeoutId);
  var $submenu = $(this).find("ul");
  $submenu.show(0);
};

var hoverOut = function() {
  var $submenu = $(this).find("ul");
  timeoutId = setTimeout(function() {
    $submenu.hide(0);
  }, delay);
};

$(".menu > li").hover(hoverIn, hoverOut);
```

以上代码实现了一个简单的二级横向下拉菜单，当鼠标悬停在一级菜单上时，对应的二级菜单会展开，移开鼠标时会收起。你也可以根据需要进行样式和行为的定制。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值