<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .menu{ width: 120px; margin: 20px auto; } span{ line-height: 50px; font-size: 20px; margin-left: 36px; } .list{ width: 100px; line-height: 18px; border: 2px solid #888; padding: 0 10px; display: none; } </style> </head> <body> <div class="menu"> <span>菜单</span> <div class="list"> <p>新建课堂</p> <p>新建实训</p> <p>新建实训路径</p> <p>新建项目</p> </div> </div> <script> $(function(){ //-------------- Begin ---------------- //-------------- End -------------------- }) </script> </body> </html>

时间: 2024-02-27 12:53:16 浏览: 50
这是一个基本的 HTML 页面，包含一个菜单容器和一个菜单内容容器。当点击菜单时，菜单内容会展开或收起。下面是实现这个效果的 jQuery 代码： ```javascript $(function() { $(".menu > span").click(function() { $(this).siblings(".list").slideToggle(); }); }); ``` 解释一下： - `$()` 是 jQuery 的选择器，可以选中 HTML 元素。 - `$(".menu > span")` 是选中菜单容器中的标题元素。 - `.click()` 方法是当元素被点击时执行的函数。 - `$(this)` 是指当前被点击的元素。 - `.siblings(".list")` 是选中当前被点击元素的兄弟元素中的菜单内容容器。 - `.slideToggle()` 方法是执行展开或收起动画，如果菜单内容容器是展开状态，则会收起，反之亦然。 这样，当点击菜单时，菜单内容会展开或收起。
相关问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="/jquery-3.6.3.min.js"> $("#11").click(function (){ alert("haha"); }) </script> <button id="11">haha</button> </body> </html>该代码为什么不弹出警示框

该代码没有在文档加载完成后执行JavaScript代码，因此jQuery代码无法生效。在引入jQuery库的`<script>`标签中，应该只引入jQuery库文件，而不应该将JavaScript代码写在里面。 正确的写法是，将jQuery代码放在`<script>`标签外面，并将代码放在文档就绪函数中，如下所示： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="11">haha</button> <script src="/jquery-3.6.3.min.js"></script> <script> $(document).ready(function(){ $("#11").click(function (){ alert("haha"); }); }); </script> </body> </html> ``` 这样，在网页加载完成后，jQuery代码才会生效，点击按钮时才会弹出警示框。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #father { width: 300px; height: 300px; background-color: pink; margin: 100 auto; } </style> </head> <body> <div id="father"> <div id="son"></div> <div></div> <div></div> </div> <script> let i = document.querySelector(".father") console.log(i); </script> </body> </html>

根据你提供的代码，你的 HTML 中的 `div` 元素的 `id` 属性为 `father`，而不是 `class` 属性。因此，你应该使用 `querySelector("#father")` 来选择 `id` 为 `father` 的元素，而不是 `querySelector(".father")`。 以下是修改后的代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #father { width: 300px; height: 300px; background-color: pink; margin: 100 auto; } </style> </head> <body> <div id="father"> <div id="son"></div> <div></div> <div></div> </div> <script> let i = document.querySelector("#father") console.log(i); </script> </body> </html> ``` 现在，变量 `i` 将会指向 `id` 为 `father` 的元素，并且不再是空值。

相关推荐

docx

网页设计作业-综合案例

 <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">  <title>Document</title> </head> <body>  ...
pdf

关于css中line-height(行高)设置无效的问题的解决方法

meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .head{ height: 100px; text-align: center; line-height: 100px;/* 设置行高，让字体居中 */ ...
zip

remove-html-comments:删除 html 中的注释

meta charset="UTF-8"><title>Document</title></head><body></body></html>' ) ;/*=> { data: '<!DOCTYPE html><html lang="en"><head><meta cha

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> <body> <input type="text" v-model="message"> <script> var app = new Vue({ el: "#app", date: { message: "Hello Vue!" } }) </script> </body> </html> 代码运行报错 ReferenceError: message is not defined

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> </head> <body...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.6.3.min.js"></script> <script> $().ready=function () { $("#11").click(function () { alert("haha"); }) } </script> <button id="11">haha</button> </body> </html>为什么不弹出警示框

<meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.6.3.min.js"></script> <script> $(document).ready(function () { $("#11").click(function () { alert("haha"); }); }); </script>...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <template> 胡图图 </template> <script> var vm = new Vue({ el: '#app', components: { 'my-component': { data() { return { showImage: false } } } } }); </script> </body> </html>找找点击字体图片无法显示的问题

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component>...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style>

但是，您可以在<style>标签中编写CSS样式，然后将其应用于网页中的HTML元素。例如，可以通过以下方式将样式应用于段落元素： <style> p { color: blue; font-size: 16px; } </style> <p>This is a ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; font-size:20px; } h2{ color:yellow; } .hello{ background: #cccccc; } .world{ font-weight:bold; } #haha{ color:blue; } </style> </head> <body> welcome to css! hello world! WEB前端开发 Java开发
welcome to css! hello world! WEB前端开发 Java开发 主讲：Hector 主讲：Hector
哈哈 </body> </html> 解释下每行的意思

<meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; font-size:20px; } h2{ color:yellow; } .hello{ background: #cccccc; } .world{ font-weight:bold; } ...

sublime报Error trying to parse file: Expected value in Packages \User\ Default (Windows).sublime-keymap:4:1 <!DOCTYPE html> ‹html lang="en"› <head> <meta charset-"UTF-8"› <title›Document‹/title> </head> <body> </body> </html>

这个问题看起来是你的 Sublime Text 编辑器尝试打开一个 HTML 文件，但是文件内容并不符合 JSON 格式，导致解析错误。你可以尝试以下几个步骤来解决这个问题： 1. 确认你打开的是一个正确的 JSON 文件，而不是一个 ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示当前日期</title> </head> <body onload="currenttime()"> 软工22**班***的时间日期对象 <script> function currenttime(){ } </script> </body> </html>添加相应JS 代码，动态的显示当前时间，每秒更新。

<meta charset="UTF-8"> <title>显示当前日期</title> </head> <body onload="currenttime()"> <h2 align="center" style="color: blue;">软工22**班***的时间日期对象</h2> <h1 align="center" id="htime" ...

以下代码如何在li中输出name和age<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="vue.js"></script> </head> <body> {{index.name}}-{{index.age}} <script> new Vue({ el: ".box", data: { person: [{ id: "001", name: "张三", age: 18 }], }, }); </script> </body> </html>

<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src=...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>按钮</title> </head> <body> <button id="btn">点击生成3000个按钮</button> </body> <script> var btn = document.getElementById("btn"); btn.onclick = function () { for (i = 0; i < 3000; i++) { document.getElementById("content").innerHTML += '<input name="按钮" type="button" onClick="clic()" value="按钮"><\/input>'; } }; </script> </html> 生成3000按钮太卡了 优化一下代码

<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>按钮</title> </head> <body> ...
rar

01-JSONP.rar

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> ...
html

04表单事件.html

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取内容和值</title> </head> <body> <div id="box1"> 获取我的内容 </div> <div id="box2"> ...
zip

html-non-conditional-comment-regex:用于匹配非条件 HTML 注释的正则表达式

用于匹配非条件 HTML 注释的正则表达式 ...meta charset="UTF-8"><title>Document</title></head><body></body></html>' ) ; //=> true htmlNonConditionalCommentRegex . te
pdf

html中表单提交的实现

meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>...
pdf

Html5 FileReader实现即时上传图片功能实例代码

meta charset=”UTF-8″> <title>Document</title> </head> <body> <p><style type=”text/css”> #kk{ width:400px; height:400px; overflow: hidden; } #preview_wrapper{ width...
pdf

一个不错的HTML5 Canvas多层点击事件监听实例

meta charset=”UTF-8″> <title>Document</title> <style type=”text/css”> .box > canvas { position: absolute; } </style> </head> <body> <div class=”box”> <...

最新推荐

recommend-type

JavaScript_catvod的开放版本.zip

JavaScript
recommend-type

node-v10.4.1-headers.tar.gz

Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
recommend-type

node-v13.8.0-headers.tar.xz

Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
recommend-type

node-v14.1.0-headers.tar.xz

Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
recommend-type

batik-svggen-1.7.jar

Batik是为想使用svg格式图片来实现各种功能的应用程序和Applet提供的一个基于java的工具包
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构：Kafka与Hive集成

![实现实时数据湖架构：Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势： - **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。 - **数据民主化：**实时数据湖使各种利益相关者都可
recommend-type

可见光定位LED及其供电硬件具体型号，广角镜头和探测器，实验设计具体流程步骤，

1. 可见光定位LED型号：一般可使用5mm或3mm的普通白色LED，也可以选择专门用于定位的LED，例如OSRAM公司的SFH 4715AS或Vishay公司的VLMU3500-385-120。 2. 供电硬件型号：可以使用常见的直流电源供电，也可以选择专门的LED驱动器，例如Meanwell公司的ELG-75-C或ELG-150-C系列。 3. 广角镜头和探测器型号：一般可采用广角透镜和CMOS摄像头或光电二极管探测器，例如Omron公司的B5W-LA或Murata公司的IRS-B210ST01。 4. 实验设计流程步骤： 1）确定实验目的和研究对象，例如车辆或机器人的定位和导航。
recommend-type

JSBSim Reference Manual

JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。