首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js怎么让移动端能下拉菜单

在JavaScript中实现移动端的下拉菜单功能,通常涉及到监听触摸事件和动态改变元素的样式。以下是一个简单的示例,展示了如何使用原生JavaScript和CSS来创建一个基本的下拉菜单。

HTML结构

代码语言:txt
复制
<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

CSS样式

代码语言:txt
复制
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

JavaScript代码

代码语言:txt
复制
document.addEventListener('DOMContentLoaded', function() {
  var dropdowns = document.querySelectorAll('.dropdown');

  dropdowns.forEach(function(dropdown) {
    dropdown.addEventListener('touchstart', function(event) {
      event.stopPropagation();
      this.querySelector('.dropdown-content').style.display = 'block';
    });

    dropdown.addEventListener('touchend', function(event) {
      event.stopPropagation();
      this.querySelector('.dropdown-content').style.display = 'none';
    });
  });

  document.body.addEventListener('touchend', function() {
    dropdowns.forEach(function(dropdown) {
      dropdown.querySelector('.dropdown-content').style.display = 'none';
    });
  });
});

解释

  1. HTML结构:创建一个包含按钮和下拉内容的容器。
  2. CSS样式:定义了下拉菜单的基本样式,包括按钮和内容的显示方式。
  3. JavaScript代码
    • 监听DOMContentLoaded事件,确保DOM完全加载后再绑定事件。
    • 对每个下拉菜单元素添加touchstarttouchend事件监听器。
    • touchstart事件中显示下拉内容,在touchend事件中隐藏下拉内容。
    • 添加一个全局的touchend事件监听器,用于在点击页面其他地方时隐藏所有下拉菜单。

优势

  • 响应式设计:适用于移动端设备,提供良好的用户体验。
  • 简单实现:使用原生JavaScript和CSS,无需依赖外部库。
  • 易于定制:可以根据需要调整样式和行为。

应用场景

  • 移动应用中的导航菜单。
  • 设置页面中的选项列表。
  • 任何需要在移动设备上提供快速访问选项的场景。

通过这种方式,你可以轻松地在移动端实现一个简单的下拉菜单功能。如果需要更复杂的功能或更好的兼容性,可以考虑使用现有的UI框架或库,如Bootstrap或Vuetify。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS判断当前设备属于哪种客户端并让移动端可调试

引言 最近做的一个项目需要同时适配PC端和iPad及mobile移动端,由于PC端的设备屏幕宽度比iPad和mobile端大太多,因此页面布局需要进行区分。...另外Vue项目在PC端进行开发时,我们可以通过按住F12键进入开发者模式对代码进行调试;然而iPad和Mobile等移动端设备上运行的项目却无法通过移动设备自带的快捷键而进入调试模式查看打印日志和网络请求...本文主要使用javascript代码判断当前设备属于何种客户端,并通过安装插件的方式让我们在移动端设备上也能查看前端项目打印的日志及网络请求,希望对读者朋友们有帮助。...下面我们借用一个js库来更加准确的判断当前设备属于哪种客户端。...} else if(device.mobile()){ // 移动手机端 deviceRoutes = routerM } else { // PC端 deviceRoutes = routerPc

1.2K40
  • 实战 | 移动端如何让页面强制横屏

    最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=。=),要求横屏显示,不能竖屏。 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很蠢的事情。...那么现在我唯一能想到的解决办法,就是在竖屏模式下,写一个横屏的div,然后把它转过来。 好了我的测试页面结构如下: 很简单对不对,最终的理想状态是,把lol非常和谐的横过来。...会通过下面的js来补。 在这里我们先取得了屏幕内可用区域的宽高,然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏,就把print这个div的宽高设置下,对齐,然后旋转。

    4.9K30

    如何让CNN高效地在移动端运行

    一.简介 最近,越来越多的工作关注与如何将CNN模型应用到移动端,在移动端的应用中,常用的方式是训练过程在服务器中进行,而测试或推断的过程则是在移动设备中执行。...目前移动设备无法使用CNN模型的主要限制在于移动设备的存储能力,计算能力和电池供能。因此针对移动设备受限资源,需要单独设计CNN的结构。...那么为了提升模型在移动设备中测试过程的效率,我们可以对训练好的模型做处理,消除冗余的参数,同时对准确率没有明显的影响。...图4.1 针对各个网络的压缩和加速效果 经过实验,作者发现移动设备中加速的效果明显由于GPU的加速效果。...作者分析主要原因在于移动设备中GPU去我少线程级的并行计算,Samsung S6中的县城数比Titan X少24倍。

    1.1K40

    【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

    导绪移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...touchstart,touchmove,touchend 可以实现拖动元素2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0] 里面的pageX和pageY3.拖动的原理:手指移动计算出手指移动的距离...,然后用盒子原来的位置+手指移动的距离4.手指移动的距离 = 手指滑动中的位置 - 手指刚开始触摸的位置移动盒子,盒子原来的位置+手指移动的距离 this.style.left =

    55000

    JS案例 - 基于vue的移动端长按手势

    监听手指按下去后是否有移动,就该touches上场了,监听他的clientX,clientY只要没变就是没移动。 并且在这个过程中,还会不时地有地方的英雄冒出来干扰我们补兵。...那就是一个手机自带的效果了:   长按时,在移动端触摸文字,(至少ios里)会出现选择文字等干扰我们的真正功能,用了preventDefault()这个属性后就没有了。...0; /* 到这里已确定触发了长按事件,接下来执行长按后要做的其他事情 */ } }, false); } } 哎呀,我怎么可能直接甩了代码扭头就走呢...所以每次获取数组里边的第一个对象对应的clientX和clientY,就是实时的移动点的位置 //找这个点的作用,就是为了监听用户,是否按住还移动了。...// 那么移动的话,先要清除事先埋伏的定时器timer1.要不然,虽然不是长按事件但是倒计时还在进行中。

    9.1K30

    Vue.js开发移动端经验总结

    作者:阡ゼ陌 移动端适配 相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题。...idealviewport为浏览器定义的可完美适配移动端的viewport,固定不变,可以认为是设备视口宽度device-width。...user-scale=no禁止缩放 所以现在我们知道,这段在移动端常见的代码的意思,即将visualviewport和layoutviewport设置为idealviewport的值;这样我们在移动端就不会出现滚动条...UI出图的时候一般是有一个固定的宽度的,而我们实际的移动端设备的宽度却都不太一样,但是如果页面元素的缩放比例和页面宽度的缩放比例一致,在不同尺寸的设备下我们网页的效果也将会是一致的。...键盘弹出与使用transform属性的情况在移动端是很常见的,所以需要谨慎使用position:fixed。 推荐使用flex flex,即弹性布局,移动端兼容性较好,能够满足大部分布局需求。

    4.3K10

    🤔 移动端 JS 引擎哪家强?美国硅谷找......

    在移动端应用比较广泛的脚本语言有 Lua 和 JavaScript,前者在游戏领域用的比较多,后者在应用领域用的比较多。...性能没得说,开启 JIT 后就是业内最强(不止是 JS),有很多介绍 V8 的文章,我这里就不多描述了,我们这里说说 V8 在移动端的表现。...Hermes 的字节码,首先省去了在 JS 引擎里解析编译的流程,JS 代码的加载速度将会大大加快,体现在 UI 上就是 TTI 时间会明显缩短;另一个优势 Hermes 的字节码在设计时就考虑了移动端的性能限制...综合来看,QuickJS 是一款潜力非常大的 JS 引擎,在 JS 语法高度支持的前提下,还把性能和体积都优化到了极致。在移动端的 Hybrid UI 架构和游戏脚本系统都可以考虑接入。...如果大家有移动端 JS 引擎选型的困惑,我认为从本文出发,还是可以给不少人以灵感的,希望我的这篇文章能帮助到大家。 参考链接 跨端框架的核心技术到底是什么? 如何隐藏你的热更新 bundle 文件?

    4.3K30

    移动端车牌识别sdk让城市变得更智慧。

    越发达的地区,人均保有车辆越多,加上我国的“互联网+”提出,移动业务越来越兴旺发达,智能终端(智能手机及平板电脑)及移动通信(4G)发展迅速,人们用手机的频率比用电脑的多,灵活便捷,随处可用,因此,手机成为生活中必不可少的工具...“互联网+”迫使得移动端APP应用火爆,如今警务方面的办事办案,都离不开移动端的支持,收费也是,没有PDA,连锁就不完美。 移动端车牌识别功能 1....移动端车牌识别注意事项: 1、光照,拍摄时注意光照的影响,尽量避免反光和黑影; 2、角度,不要使拍摄角度倾斜过大,以免造成图像严重变型; 3、聚焦,手机聚焦清晰,避免文字模糊不清楚。

    70220
    领券