如果单击<li>,则隐藏内部div

您好！根据您的问题，我了解到您想了解如何在单击 <li> 标签时隐藏内部的 <div> 元素。以下是一个简单的方法，使用 JavaScript 和 CSS 来实现这个功能：

首先，在 HTML 文件中添加一个<style>` 标签，以便我们可以在其中编写 CSS 代码：

  .hidden {
    display: none;
  }
</style>

接下来，在 HTML 文件中添加 <li> 标签和 <div> 标签：

<li onclick="toggleDivVisibility()">点击我
  <div id="myDiv" class="hidden">这是一个隐藏的 div 元素。</div>
</li>

最后，在 HTML 文件中添加 JavaScript 代码，以便我们可以在其中编写 JavaScript 代码：

  function toggleDivVisibility() {
    var div = document.getElementById("myDiv");
    if (div.classList.contains("hidden")) {
      div.classList.remove("hidden");
    } else {
      div.classList.add("hidden");
    }
  }
</script>

现在，当您单击 <li> 标签时，内部的 <div> 元素将会隐藏或显示。这个方法使用了简单的 CSS 和 JavaScript，不需要使用任何云计算品牌商。

相关·内容

如何在 React 中点击显示或隐藏另一个组件？

本地状态（也称为组件状态）是组件内部的状态，只能在组件内部进行修改。全局状态（也称为应用程序状态）则是整个应用程序中的状态，可以从不同的组件访问和修改。在本文中，我们将关注本地状态。...如果 isVisible 的值为 true，则条件渲染的 div 元素将被呈现。否则，它将不会被呈现。...显示/隐藏菜单我们可以使用事件处理函数来显示或隐藏菜单。当用户单击菜单按钮时，菜单应该出现，然后当用户单击菜单外部时，菜单应该消失。...然后，我们编写了一个名为 handleClickOutside 的事件处理函数，它将检查用户单击的元素是否在菜单之外。如果用户单击的元素不在菜单中，则将可见性设置为 false，菜单将被隐藏。...如果用户单击的元素不在模态对话框中，则将可见性设置为 false，模态对话框将被隐藏。否则，模态对话框保持可见。我们还添加了一个关闭按钮，用于关闭模态对话框。

4.4K1 0

JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> div显示和隐藏 ?...，当前function返回为false，则结束循环(相当于js中使用的break)，如果返回为true，则结束本次循环，继续下次循环(相当于js中使用的continue)；【练习案例】： <!...，则结束循环 if("上海" == $(element).html()){ //如果当前function返回为false...//如果返回为true，则结束本次循环，继续下次循环(continue) return true; }

9.4K2 0

JQuery高级应用

hide([speed,[easing],[fn]]) ：隐藏 toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示 div显示和隐藏 $("#showDiv").show("...false：如果当前function返回为true，则结束本次循环，继续下次循环(continue) $.each(object, [callback])，object为需要遍历的jq对象，回调方法中的参数与

5.9K3 0

学习jQuery这一篇就够了

注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height.../li>'; $(last).appendTo($('ul')); # 5. prepend() 方法描述：向当前匹配的所有元素内部的最前面插入指定内容。...如果传入一个 true，则表示是否会复制元素上的事件处理函数，从 jQuery 1.4 开始，元素数据也会被复制。...需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色 1111 2222</...: none; } $('.box').show(); # 3. toggle() 方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

8175 0

第51次文章：JQuery高级

元素对象) // alert(index+": "+element.innerHTML); //判断如果是上海，则结束循环 if("上海" == element.innerHTML...){ //如果当前function返回为false，则结束循环（相当于break） //如果返回true，则结束本次循环，继续下一次循环(相当于continue...of citys){ alert(li.innerHTML); } }) 三、事件绑定 1、jquery标准的绑定方式 jq对象.事件方法（回调函数）；【注】如果调用事件方法...当单击jq对象对应的组件后，会执行fn1，第二次单击会执行fn2..... 【注意】1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。...").fadeIn("slow"); } //隐藏广告 function adHide() { //获取广告div，调用隐藏方法

3.6K3 0

JQuery的学习

，则建议使用pro； 2.如果操作的是元素自定义的属性，则建议使用attr * 复选框状态checked 和下拉表列中selected 必须用 prop 获取 <script...class="one",则将属性值one删除； * 如果不存在，则添加。...，则结束循环 /* if ("上海" == $(element).html()) { //如果当前function返回为false，则结束循环(...break) //如果返回为true，则结束本次循环，继续下次循环(continue) //return false;...广告显示和隐藏： <!

16.6K2 0

JavaScript事件与例子（三）

首先获取到所有好友列表 40 var l=document.getElementsByClassName("li"); 41 //鼠标单击事件 42 function xuan(...45 function yishang(s){ 46 //遍历数组，判断每个颜色是绿色即移上状态，则颜色设为白色即初始颜色，如果颜色是蓝色即选中状态，则跳出本次循环颜色依旧为蓝色...，则变为绿色，该方法的漏洞在于，当前没有颜色可以获取 63 如果使用该方法，应当在元素中内联颜色 64 if(s.style.backgroundColor...首先鼠标移上，执行函数 yishang()，然后进for循环遍历进行判断，不符合判断任何一种情况，则无操作，进行下一个判断，如果当前元素颜色是被选中状态则跳出，如果不是则设为绿色，第一个颜色就这样赋值上了...document.getElementsByClassName("liw"); 66 var a=document.getElementById(id); 67 //判断里注意用== 68 //如果当前元素隐藏则显示

6566 0

前端jQuery炫酷效果

获取用户输入的数据 -- value属性值访问 2、看下拉菜单的选项如果是a -- 获取下拉菜单的vlaue == 0，把用户的数据按照a的模板展示；如果是b --获取下拉菜单的vlaue == 1，...节点 2、删除节点 3、上下箭头移动节点 // 1：增加按钮单击：获取用户输入的数据，数据放到li节点里面，追加li节点到页面 $('#btn1').click(function...的前一个li css } else if(classVal == 'down') { // 如果是最后一个提示...，弹窗消失；点击x弹窗消失；点击弹窗内部，弹窗不消失。...').hide() }) $('.pop_con').click(function(){ // 不需要执行显示，也不能隐藏

3.8K3 0

Web APIs第二天

淘宝点击关闭二维码 // 核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素 <img src="images...随机点名 // 需求：点击按钮之后，随机显示一个名字，<em>如果</em>没有显示<em>则</em>禁用按钮开始点名吧点击开始点名 function...小米搜索框案例 ①开始下拉菜单要进行<em>隐藏</em> ②表单获得焦点 focus，<em>则</em>显示下拉菜单，并且文本框变色（添加类） ③表单失去焦点，反向操作 //需求：当表单得到焦点，显示下拉菜单，失去焦点<em>隐藏</em>下来菜单 <...全选文本框案例 ①全选复选框点击，可以得到当前按钮的 checked ②把下面所有的小复选框状态checked，改为和全选复选框一致 ③<em>如果</em>当前处于选中状态，<em>则</em>把文字改为取消，否则反之 //需求：用户点击全选...1 <em>则</em>添加上disabled状态 //需求：用户点击加号，<em>则</em>文本框+1，点击减号，<em>则</em>文本框-1，<em>如果</em>文本框为1，<em>则</em>禁用减号 <input type="text" id="box" value

1.1K6 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

(1算起) first()，获取第一个元素 last()，获取最后个元素 hasClass(class)，检查当前的元素是否含有某个特定的类，如果有，则返回true。...•end 结束选取自己的位置，如果不指定，则就是本身的结尾 1.2 查找 children([expr])，取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...第一个元素是0.如果是负数，则可以从集合的尾部开始选起。 •end 结束选取自己的位置，如果不指定，则就是本身的结尾。...],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。...toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。

8.2K2 0

Fabric.js 右键菜单

，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）；左键单击画布其他地方，隐藏菜单；实现思路：创建画布；创建 “菜单” 的DOM元素；去官网查找 “右键相关事件”；右键单击在元素上，根据鼠标离画布边缘的距离...，计算菜单要显示的位置；左键单击在画布上，隐藏菜单；实现查文档在上面的思路中，其实难点只有 “右键相关事件” 。...-- 右键菜单（绝对定位，且默认是隐藏的） --> <div id="menu" class="menu-x" > 什么都不做什么都不做什么都不做什么都不做删除此时的效果如上图所示。

7K1 0

Web阶段：第五章：JQuery库

$("li:gt(5):not(:last)").hide(); // 给按钮绑定单击事件 $("div div a").click(function(...if ($("li:gt(5):not(:last)").is(":hidden")) { // 如果品牌隐藏了，要显示的【显示全部品牌】 $("...$("li:contains('爱国者'),li:contains('明基')").removeClass(); } else { //如果品牌都可见了，...function(){})是Jquery的方法(等价于(document).ready(function(){}) )，两者主要有以下几点差别：1、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个...2、(function(){})：在Dom节点创建完成后执行，如果有多个定义则依次执行可以看出(function(){})在window.onload前执行他们分别是在什么时候触发？

26.1K2 0

JQuery

hide()隐藏内容 show() 显示 toggle() 一下显示一下隐藏括号中如果有参数，填数字（单位是毫秒），那么会有动画效果，如果不填，没有动画效果。对比js和jq： <!...找到div 隐藏 $('#btn').click(function(){ // $('div').hide(500)...-- 需求：按钮 div，按钮单击控制div隐藏 display:none style --> 按钮文字1 文字2 文字3...class="father"> 表单验证：用户输入，然后利用正则判断，如果正确，

7.7K2 0

一些经典案例

的兄弟标签隐藏 // $('.tab_cons div').eq(num).siblings().removeClass() $('.tab_cons div...script> $(function(){ $('input').focus(function(){ // 如果是默认值的时候才清空...val('') } }) $('input').blur(function(){ // 如果用户没有输入的时候.../js/jquery-1.12.4.min.js"> $(function(){ // 左侧的span单击，隐藏left...span，隐藏这个span 的父级 $('span').click(function(){ $(this).parent().hide(500)

8503 0

利用easyui实现菜单节点和选项卡的联动效果

> 最外层的div就是设置这个div为选项卡，里面有几个内部的div，那么就有几个选项卡，只要写了上面的代码，那么我们在页面就可以看到因为里面写了两个内部的div，那么就可以看到两个选项卡...如果当前菜单对应的选项卡已经存在，则不会重新创建，而是选择已经存在的选项卡显示给用户。...具有子菜单的一级菜单是无需创建选项卡的 [2] 功能实现 ① 给树状菜单的节点增加单击事件 ② 在树节点的单击事件中校验当前点击的是资源跳转菜单还是一级菜单 ③ 在树节点的单击事件中增加新增选项卡的逻辑...④ 判断菜单节点的选项卡是否存在如果已经存在，则选中，而不是创建 [3] 示例代码先是菜单的代码，这个代码的样式是使用easyui的树class=“easyui-tree” <%--声明树状的ul...如果我们在里面写几个内部的div，就会有效果。但是现在是点击了菜单之后，里面才建立内部的div，所以需要在菜单按钮上面加事件。

1.4K2 0

Vue零基础到高阶第二节☀️

-- 即事件不是从内部元素触发的 --> ... 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。...注意：v-bind:class指令可以与普通的class特性共存 1、 v-bind 中支持绑定一个对象如果绑定的是一个对象则键为对应的类名值为对应data中的数据如果flag为true则显示,false不显示!...currentIndex === index 如果相等则添加类名 active 否则添加空类名。...如果相等则当前li 添加active 类名当前的 li 高亮当前对应索引的 div 添加 current 当前div 显示其他隐藏。

5K2 0

javaWeb核心技术第五篇之jQuery

jq对象.attr({ "属性名称":"值", "属性名称":"值" }); 删除: removeAttr("属性名称"); prop:如果...技术分析: 事件文档处理 //////////////////// 步骤分析: 1.确定事件(单击事件) 给按钮派发单击事件 2.编写函数 //a.将左边选中的第一个插入到右边...: - append a.append(c) 将c插入到a的内部的后面 - prepend a.prepend(c) 将c插入到a的内部的前面 -...appendTo a.appendTo(c) 将a插入到c的内部的后面 - prependTo a.prependTo(c)将a插入到c的内部的前面内插入案例: $(function(){ //给span派发单击事件 $("span").click(function(){ //将span后面的a标签显示或隐藏

8K1 0

前端三大框架之Vue-day01

-- 阻止单击事件继续传播 --> ... 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。...注意：v-bind:class指令可以与普通的class特性共存 1、 v-bind 中支持绑定一个对象如果绑定的是一个对象则键为对应的类名值为对应data中的数据学习Vue 学习Node 学习React 如果flag为true则显示,false不显示!

1.7K1 0

vue指令和用法？

1.2K2 0

前端成神之路-vue01

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云