用css实现下拉框的展开和收回

最新推荐文章于 2023-10-23 18:52:18 发布
最新推荐文章于 2023-10-23 18:52:18 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端样式 文章标签： css下拉框 下拉框的展开和收回 前端实现下拉框打开收回
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yeyuhui94267/article/details/80095568
版权 
 

html部分:
 

<li class="clickoff">
 

<span>这个是一级标题</span>
 

<ul>
 

<li role="presentation">这里是二级标题<li/>
 

<li role="presentation">这里是二级标题<li/> 
 

<li role="presentation">这里是二级标题<li/> 
 

<li role="presentation"

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  yeyuhui94267
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
利用CSS实现酷炫的下拉框特效

				
			

			

				

					12-29
				

			

		

		

			
				
首先来看看要实现的效果图  想要制作这么一个效果还是比较麻烦的，但是代码并不难理解。 首先，来看看 Html 代码。 XML/HTML Code复制内容到剪贴板        <h2>Custom Select           <p>Please select   ...

			
		

	



                

              
                



	

		

			

				
					
html菜单栏用户点击完自动收缩,js 下拉菜单点击旁边收起实现(踩坑记)

				
			

			

				

					weixin_42532473的博客
				

				

					05-30
					
					1137
					
				

			

		

		

			
				
背景：最近在搞一个需求：搜索框，输入时显示联想词下拉列表，当点击联想词跳转到搜索页，如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦(blur)去做收起操作避免body的监控，随后就踩坑里了，下面情景再现，一步一步来看这个问题的解决(里面的demo等会用vue实现)带有bug的版本演示图备注：最后的搜索跳转我直接用console代替掉了，但是并没有执行问题抛出当我点击上面的联想词的时候...

			
		

	



                


  
              

                


	

		

			

				
					
html下拉菜单自动收回,jquery使用hover触发下拉菜单如果为什么有空隙就自动收回？...

				
			

			

				

					weixin_34739646的博客
				

				

					06-05
					
					802
					
				

			

		

		

			
				
移到空隙相当于移出dropdown了，此时你并没有移动到dropmenu上dropmenu就消失了，所以导致点击不了导航，可以用onmouseover和onmouseout，加个延时处理#div1{height: 100px;width: 100px;background: #000000;position: relative;}#div2{height: 200px;width: 100px;b...

			
		

	





	

		

			

				
					
css3实现下拉框动画效果

					
热门推荐

				
			

			

				

					web_hwg的博客
				

				

					03-31
					
					2万+
					
				

			

		

		

			
				
HTML：<div class="content">
    <div class="select">
        <p>所有选项</p>
        <ul>
            <li data-value="所有选项" class="selected">所有选项</li>
            <li data-value="html">html</li>

			
		

	



		

			
		



	

		

			

				
					
css实现展开收起效果！！

					
最新发布

				
			

			

				

					chenyajundd的博客
				

				

					10-23
					
					1146
					
				

			

		

		

			
				
之所以分享这个效果，一是是觉得挺有意思的，二是也是感慨目前随着前端技术的发展，一些新技术慢慢已经取代了老技术，就比如 flex 和 float，我们在工作中可能更多的是使用 flex 进行布局，而慢慢的忽视了 float，而真正的需要 float 登场的时候，又想不起来要去使用它了。

			
		

	





	

		

			

				
					
css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

				
			

			

				

					weixin_42776027的博客
				

				

					09-25
					
					6774
					
				

			

		

		

			
				
转载地址：https://my.oschina.net/u/4369742/blog/3484647

HTML代码：


<div
        className={CX('font-size-selector-sub-list', {
          show: shouldSubListShow === true,
          hidden: shouldSubListShow === false,
        })}
      >
        {
       

			
		

	





	

		

			

				
					
小程序自己写下拉框css样式，下拉动画上拉回缩

				
			

			

				

					weixin_43923808的博客
				

				

					03-25
					
					662
					
				

			

		

		

			
				
<view class="option-list-wai">

   <view class="sanjiao"

      wx:if="{{isShowDate}}"></view>

   <scroll-view scroll-y

         style="height: 320rpx;"

         class="{{isShowDate?'show':'option-...

			
		

	





	

		

			

				
					
纯Css更改Select下拉框样式

				
			

			

				

					03-04
				

			

		

		

			
				
纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框...

			
		

	





	

		

			

				
					
vue 不使用select实现下拉框功能(推荐)

				
			

			

				

					08-27
				

			

		

		

			
				
本篇文章主要介绍了 Vue 不使用 Select 实现下拉框功能的方法，我们可以使用 v-for 循环和 transition 来实现下拉框的展开和收缩效果，同时也可以使用 Vue Select 组件来实现下拉框功能，并使用业务逻辑来控制下拉框...

			
		

	





	

		

			

				
					
C# MVC 使用LayUI实现下拉框二级联动的功能

				
			

			

				

					08-19
				

			

		

		

			
				
在本文中，我们将详细介绍如何使用 LayUI 库来实现下拉框二级联动的功能，包括如何加载 LayUI 模块、如何创建控制器和操作方法、如何在视图页面中使用 LayUI 库来渲染下拉框和处理选择事件。  LayUI 库提供了很多...

			
		

	





	

		

			

				
					
纯CSS实现下拉框

				
			

			

				

					six6de6的博客
				

				

					07-12
					
					4769
					
				

			

		

		

			
				
css简单下拉框的实现！

			
		

	





	

		

			

				
					
css实现下拉菜单

				
			

			

				

					ybh756784818的博客
				

				

					04-12
					
					9135
					
				

			

		

		

			
				
css实现下拉菜单的具体步骤，前端小白的个人理解

			
		

	





	

		

			

				
					
怎么实现下拉收回效果

				
			

			

				

					jianxiba5860的博客
				

				

					12-31
					
					310
					
				

			

		

		

			
				
我加了一个headView  上面罗列两行共8个按钮，点击最后一个按钮的话，headView会下拉展现出所有的按钮，点击其中任意按钮再收回到原来的位置显示8个按钮，请大神告知如何实现？

			
		

	





	

		

			

				
					
css实现下拉框效果

				
			

			

				

					weixin_48122970的博客
				

				

					08-20
					
					714
					
				

			

		

		

			
				
【代码】css实现下拉框效果。

			
		

	





	

		

			

				
					
html下拉展开代码,js+css3手风琴展开收缩下拉菜单代码

				
			

			

				

					weixin_29313239的博客
				

				

					05-31
					
					335
					
				

			

		

		

			
				
js代码var list = document.querySelectorAll('.list');function accordion(e) {e.stopPropagation();if (this.classList.contains('active')) {this.classList.remove('active');} elseif (this.parentElement.parent...

			
		

	





	

		

			

				
					
html导航菜单展开收缩特效,div+css+js实现菜单的收缩与展开

				
			

			

				

					weixin_42505477的博客
				

				

					06-03
					
					1391
					
				

			

		

		

			
				
div+css+js实现菜单的收缩与展开body {margin: 30px auto;}ul {list-style: none;}#faq {font-size: 12px;width: 800px;}#faq li {margin: 0 0 10px;padding: 0 0 5px;}#faq dl {margin: 0;padding:0;display:inline;}#faq dt ...

			
		

	





	

		

			

				
					
CSS相关 | 问题记录 | 鼠标点击时打开/折叠菜单

				
			

			

				

					qq_43248263的博客
				

				

					12-16
					
					704
					
				

			

		

		

			
				
项目场景：
提示：这里简述项目相关背景：
例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)

问题描述：
学JS的时候，要实现：鼠标点击时，下拉菜单出现 的效果
主要方法是JS写一个函数，做到点击某个元素时，给它加上属性 .open
但始终无法做到点击就出现的效果

代码长这样：
<style>
      .menu ul{
          margin: 0;
          list-style: none;
    

			
		

	





	

		

			

				
					
css点击变色wordpress,WordPress实现点击展开折叠二级菜单+当前点击后变色

				
			

			

				

					weixin_28810315的博客
				

				

					08-04
					
					1006
					
				

			

		

		

			
				
一个客户需要开发这样的网站，左侧菜单是一个点击展开式菜单，默认是收缩的，点击后会展开带下拉子菜单的网站导航。当用户点击某个子菜单时，当前点击的菜单会变成红色。效果如下图：功能要求：一级菜单下面有多个子菜单；PC端点击目录的文章后目录树会自动关闭；PC端点击目录中的文章，设置一个颜色，用来区分当前正在阅读的文章；以下是通过WORDPRESS程序来实现这样的功能，如果你在做网站时，也需要这样的功能的话...

			
		

	





	

		

			

				
					
下拉菜单切换，点击旋转，再点击恢复初始状态

				
			

			

				

					qq_43676606的博客
				

				

					07-23
					
					1034
					
				

			

		

		

			
				
大概的代码

$(function () {
$(".btn").click(function () {
(this).css(&quot;transform&quot;,&quot;rotate(90deg)&quot;);//varsub=(this).css(&quot;transform&quot;,&quot;rotate(90de...

			
		

	





	

		

			

				
					
js+css实现下拉框

				
			

			

				

					07-14
				

			

		

		

			
				
要实现一个下拉框，你可以使用JavaScript和CSS来完成。下面是一种常见的实现方法：

HTML结构：
```html
<div class="dropdown">
  <button class="dropdown-toggle" onclick="toggleDropdown()">下拉框</button>
  <ul class="dropdown-menu">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>
```

CSS样式：
```css
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background-color: #f1f1f1;
  border: none;
  color: black;
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f1f1f1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.dropdown-menu li {
  padding: 10px;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}
```

JavaScript代码：
```javascript
function toggleDropdown() {
  var dropdownMenu = document.querySelector('.dropdown-menu');
  
  if (dropdownMenu.style.display === 'none') {
    dropdownMenu.style.display = 'block';
  } else {
    dropdownMenu.style.display = 'none';
  }
}
```

上面的代码实现了一个简单的下拉框。当点击下拉框按钮时，通过JavaScript的`toggleDropdown`函数切换下拉菜单的显示隐藏状态。

在CSS中，`.dropdown`类定义了下拉框的容器样式，`.dropdown-toggle`类定义了下拉框按钮的样式，`.dropdown-menu`类定义了下拉菜单的样式，包括其位置、背景颜色和列表项样式。

通过这种方式，你可以实现一个基本的下拉框。你可以根据需要进一步自定义样式和功能。

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值