菜单点击 显示和隐藏

最新推荐文章于 2024-02-29 18:38:18 发布
最新推荐文章于 2024-02-29 18:38:18 发布
阅读量2.9k 收藏
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z8853797/article/details/45285889
版权 
<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    *{margin:0;
     padding:0;
     font-size:13px;
     list-style:none;}

.menu{width:210px;
      margin:50px auto;
      border:1px solid #ccc;}

.menu p{height:25px;
        line-height:25px;
        font-weight:bold;
        background:#eee;
        border-bottom:1px solid #ccc;
        cursor:pointer;
        padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
         line-height:24px;
         padding-left:5px;}
</style>
	<script type="text/javascript">
		window.onload = function(){
			var menu = document.getElementById("menu");
			var ps = menu.getElementsByTagName("p");
			var uls = menu.getElementsByTagName("ul");
			for(var i = 0;i < ps.length;i++){
				ps[i].id = i;
				ps[i].onclick = function(){
					var ul = uls[this.id];
					if(ul.style.display == "block"){
						ul.style.display = "none";
					}else{
						ul.style.display = "block";
					}
				}
			}
		}
	</script>
</head>
<body>
	<div class="menu" id="menu">
		<div>
			<p>Web前端</p>
			<ul style="display:block">
				<li>JavaScript</li>
				<li>DIV+CSS</li>
				<li>jQuery</li>
			</ul>
		</div>
		<div>
			<p>后台脚本</p>
			<ul>
				<li>PHP</li>
				<li>ASP.net</li>
				<li>JSP</li>
			</ul>
		</div>
		<div>
			<p>前端框架</p>
			<ul>
				<li>Extjs</li>
				<li>Esspress</li>
				<li>YUI</li>
			</ul>
		</div>
	</div>
</body>
</html>




                

        

        

    




    

      

        

            

              
                
                  z8853797
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
html代码 点击显示隐藏菜单代码

				
			

			

				

					qq_41650558的博客
				

				

					01-19
					
					6562
					
				

			

		

		

			
				
点击显示隐藏菜单代码*{ margin:0px; padding:0px; border:0px; }body{ font-size:12px; color:#333;text-align:center;}.Test5study{ background:#fff;}.Test5study{text-align:left;width:220px;height:auto;border:solid 1p

			
		

	



                

              
                



	

		

			

				
					
jQuery实现的点击显示隐藏下拉菜单功能完整示例

				
			

			

				

					10-16
				

			

		

		

			
				
本示例将详细介绍如何使用jQuery实现点击显示和隐藏下拉菜单的功能，同时探讨jQuery事件响应和页面元素属性动态操作的基本技巧。  首先，我们来看一下示例中的HTML结构。这里有一个包含多个列表项（`<li>`）的无序...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery之导航菜单（点击该父节点时子节点显示，同时子节点的同级隐藏，但是同级的父节点始终显示）...

				
			

			

				

					weixin_34166847的博客
				

				

					10-15
					
					532
					
				

			

		

		

			
				
注：对于同一个对象不超过3个操作的，可直接写成一行，超
过3个操作的建议每行写一个操作。这样可读性较强，可提高代码的可读性和可维护性
核心代码：
 $(".has_children").click(function(){    $(this).addClass("highlight")//为当前元素增加highlight类  .children("a").show().end(...

			
		

	





	

		

			

				
					
Web 学习之侧边隐藏菜单栏

				
			

			

				

					程序员小白的博客
				

				

					01-04
					
					1316
					
				

			

		

		

			
				
制作侧边菜单栏

			
		

	



		

			
		



	

		

			

				
					
悬浮按钮显示与隐藏交互效果、工具栏展开收起交互效果、导航栏中切换账号效果、步骤流程切换效果

				
			

			

				

					WW_998的博客
				

				

					07-03
					
					1116
					
				

			

		

		

			
				
悬浮按钮显示与隐藏交互效果

实现：当点击悬浮按钮时，按钮移动后以一定效果弹出选项面板，单击选项面板时原路返回。

添加矩形框（当中web），置于底层，填充颜色，将工具符号转换为动态面板“悬浮按钮”，菜单为“弹出选项”
	将弹出选项设置为悬浮按钮的一个状态“弹出选项”，居中，按钮为状态“工具按钮”


3.在工具按钮处添加热区覆盖，点击热区，设置交互效果，使其先移动到中间，等待再以一定效果切换动态面板状态



4.弹出选项的交互效果设置



5.预览



工具栏展开收起交互效果

将要展开的内容形成组

			
		

	





	

		

			

				
					
EAS web 界面加载后，隐藏按钮

					
最新发布

				
			

			

				

					t15263857960的博客
				

				

					02-29
					
					286
					
				

			

		

		

			
				
【代码】EAS web 界面加载后，隐藏按钮。

			
		

	





	

		

			

				
					
菜单栏的隐藏与显示

				
			

			

				

					weixin_44585066的博客
				

				

					08-22
					
					797
					
				

			

		

		

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

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

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

			
		

	





	

		

			

				
					
JavaScript实现下拉菜单的显示和隐藏

				
			

			

				

					11-26
				

			

		

		

			
				
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 ...

			
		

	





	

		

			

				
					
js菜单点击显示或隐藏效果的简单实例

				
			

			

				

					10-26
				

			

		

		

			
				
本篇文章主要是对js菜单点击显示或隐藏效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

			
		

	





	

		

			

				
					
DataGridView右键菜单自定义显示及隐藏列功能

				
			

			

				

					10-16
				

			

		

		

			
				
总的来说，实现`DataGridView`右键菜单自定义显示及隐藏列功能，主要是通过创建自定义控件和菜单帮助类，结合Windows Forms的事件机制，来捕获用户的交互，动态改变列的显示状态。这样的设计不仅简化了用户操作，也...

			
		

	





	

		

			

				
					
asp.net动态js菜单(动态菜单+静态菜单+数据库)

				
			

			

				

					12-03
				

			

		

		

			
				
asp.net动态js菜单(动态菜单+静态菜单+数据库)，权限已有，连接数据库，运行项目，到菜单页面，f12就都代码都看到了。

			
		

	





	

		

			

				
					
菜单的隐藏和显示

				
			

			

				

					07-30
				

			

		

		

			
				
jQuery下拉菜单 的显示和隐藏

			
		

	





	

		

			

				
					
点击可显示隐藏菜单ListView

				
			

			

				

					04-03
				

			

		

		

			
				
点击可显示隐藏菜单ListView，当我们长按列表视图listview中的每个item，对弹出相应item的隐藏菜单，该菜单中有打开、编辑、移动、删除等功能，在菜单弹出时，点击item可以将该菜单再次隐藏起来，效果如图所示。

			
		

	





	

		

			

				
					
单击按钮显示隐藏子菜单经典案例

				
			

			

				

					09-05
				

			

		

		

			
				
这个“单击按钮显示隐藏子菜单经典案例”提供了一个简单的JavaScript解决方案，允许用户通过点击按钮控制子菜单的可见性。下面我们将详细探讨这个案例中的关键知识点。  首先，我们需要理解这个案例的目标：当用户...

			
		

	





	

		

			

				
					
1, 点击显示的菜单.rar

				
			

			

				

					02-03
				

			

		

		

			
				
为了实现点击显示效果，我们需要定义两种状态：隐藏和显示。可以使用类选择器（Class Selectors）来切换这些状态，例如`.hidden`和`.visible`。同时，可以使用`transition`属性来添加平滑的过渡效果，提高用户体验。...

			
		

	





	

		

			

				
					
显示隐藏菜单

				
			

			

				

					淘淘小窝
				

				

					10-30
					
					882
					
				

			

		

		

			
				
var i = 1;
	//隐藏左侧菜单事件
	$('.angle').click(function(){
		if(i%2==1){
			$(this).removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
			$('#nav-l').hide();
			$('#work-c').width($(doc

			
		

	





	

		

			

				
					
左边栏菜单隐藏显示

				
			

			

				

					05-31
				

			

		

		

			
				
总结来说，“左边栏菜单隐藏显示”是Bootstrap响应式设计的一个重要部分，它利用Bootstrap提供的类和事件，配合适当的CSS和JavaScript，为用户提供了一种优雅的方式来处理窄屏设备上的导航菜单。理解并掌握这一技术...

			
		

	





	

		

			

				
					
添加点击图标切换菜单栏显示与隐藏

				
			

			

				

					05-27
				

			

		

		

			
				
好的，以下是添加点击图标切换菜单栏显示与隐藏的步骤：

1. 在侧边菜单组件中添加切换菜单栏的方法

首先，你需要在侧边菜单组件中添加一个方法来切换菜单栏的显示和隐藏。以下是一个基本的切换方法示例：

```
<template>
  <div class="sidebar-menu">
    <i class="el-icon-s-fold" @click="toggleSidebar"></i>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router :collapse="isCollapsed">
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <i class="el-icon-info"></i>
        <span>关于我们</span>
      </el-menu-item>
      <el-menu-item index="/contact">
        <i class="el-icon-phone"></i>
        <span>联系我们</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'SidebarMenu',
  setup() {
    const isCollapsed = ref(false)

    const toggleSidebar = () => {
      isCollapsed.value = !isCollapsed.value
    }

    return {
      isCollapsed,
      toggleSidebar,
    }
  },
})
</script>

<style>
.sidebar-menu {
  height: 100%;
  background-color: #f0f2f5;
  padding: 20px;
}

.sidebar-menu i.el-icon-s-fold {
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>
```

在这个示例中，我们添加了一个切换方法`toggleSidebar`，用来切换`isCollapsed`的值。我们还在模板中添加了一个图标，当点击图标时会触发切换方法。

2. 在App组件中绑定菜单栏的显示与隐藏

接下来，你需要在App组件中绑定菜单栏的显示与隐藏。以下是一个基本的App组件示例：

```
<template>
  <div class="app">
    <el-container>
      <el-aside :width="isCollapsed ? '70px' : '200px'" :collapse="isCollapsed" @collapse="toggleSidebar">
        <sidebar-menu></sidebar-menu>
      </el-aside>
      <el-container>
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import SidebarMenu from './components/SidebarMenu.vue'

export default defineComponent({
  name: 'App',
  components: {
    SidebarMenu,
  },
  setup() {
    const isCollapsed = ref(false)

    const toggleSidebar = () => {
      isCollapsed.value = !isCollapsed.value
    }

    return {
      isCollapsed,
      toggleSidebar,
    }
  },
})
</script>

<style>
.app {
  height: 100%;
}
</style>
```

在这个示例中，我们在`el-aside`组件中绑定了菜单栏的宽度和是否折叠的属性。并且在`el-aside`组件中添加了一个`@collapse`事件，用来在菜单栏折叠时触发切换方法。我们还在App组件的setup函数中定义了`isCollapsed`和`toggleSidebar`。

3. 完成

现在，你已经添加了点击图标切换菜单栏显示与隐藏的功能。你可以根据你的需求自定义图标和样式。

希望这可以帮助到你！

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值