首页 > 编程语言 >JavaScript实现点击 `播放列表` 隐藏下面的列表项

JavaScript实现点击 `播放列表` 隐藏下面的列表项

时间:2022-12-24 22:22:40浏览次数:45  
标签:元素 false JavaScript flag ul 点击 播放列表 display

实现思路:

  1. 根据h2标签名获取元素对象,并获取索引是0的元素【页面中只有一个h2标签】
  2. 给该元素绑定单击事件(onclick),并绑定函数
  3. 在函数的外面定义一个变量 flag,用来记录状态
  4. 函数中逻辑
    1. 获取ul标签元素对象,并获取索引是0的元素
    2. 判断flag的值是否是true
      • 如果是说明需要展示播放列表项,将该元素的 display 样式设置为 block,并将flag设置为 false
      • 如果不是说明需要隐藏播放列表项,将该元素的 display 样式设置为 node,并将flag设置为 true
var h2Obj = document.getElementsByTagName("h2")[0];
h2Obj.onclick=fun;
var flag=false;
function fun() {

    //点击一次,隐藏列表,再次点击,显示列表
    var ul = document.getElementsByTagName("ul")[0];

    if(flag){
        ul.style.display="block";
        flag = false;
    }else {
        ul.style.display="none";
        flag = true;
    }
}

标签:元素,false,JavaScript,flag,ul,点击,播放列表,display
From: https://www.cnblogs.com/sisiyibailiu/p/17003471.html

相关文章

  • 彻底弄懂Javascript模块导入导出
    笔者开始学习Javascript的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试比如importxxfrom'test.js'不起作用,就加个括号import{xx}from'test.js'反......
  • JavaScript:类(class)
    在JS中,类是后来才出的概念,早期创造对象的方式是newFunction()调用构造函数创建函数对象;而现在,可以使用newclassName()构造方法来创建类对象了;所以在很多方面,类的使用方......
  • 第一百一十七篇: JavaScript 工厂模式和原型模式
    好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.工厂模式工厂模式是另外一种关注对象创建概念的创建模式。它的领域中同其它模式的不同......
  • 【HarmonyOS】webview在鸿蒙系统无点击反应
     背景:1、在其他品牌手机没有出现这个问题,华为非鸿蒙系统也无此问题2、webview的activity的launchmode是singleTop类型的。在shouldOverrideUrlLoading方法中,判断url是否包......
  • 【HarmonyOS】webview在鸿蒙系统无点击反应
    ​ 背景:1、在其他品牌手机没有出现这个问题,华为非鸿蒙系统也无此问题2、webview的activity的launchmode是singleTop类型的。在shouldOverrideUrlLoading方法中,判断url......
  • 史上最全!熬夜整理56个JavaScript高级的手写知识点!!专业扫盲!
    本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。前言大家好,我是林三心,基础是进阶的前提,前面我给大家分享了本菜鸟这一年来笔记中的50个JS基础知识点和50个JS高......
  • 教你用JavaScript实现进度条
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个进度条。进度条数字自动增加,条状图片动画演示进度完成度。通过实......
  • 教你用JavaScript实现进度条
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个进度条。进度条数字自动增加,条状图片动画演示进度完成度。通过......
  • JavaScript大文件上传详解及实例代码
    ​以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传 ......
  • 教你用JavaScript实现计数器
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个计数器。点击按钮数字改变,点击重置数字归0。通过实战我们将学会fo......