jQuery -每个复选框切换其自己的菜单
jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作。对于每个复选框切换其自己的菜单，可以通过以下步骤实现：
- 首先，为每个复选框和对应的菜单元素添加唯一的标识符或类名，以便在jQuery中进行选择和操作。
- 使用jQuery的事件处理函数，例如
click()，为每个复选框绑定点击事件。 - 在点击事件处理函数中，使用jQuery的选择器选择当前被点击的复选框和对应的菜单元素。
- 根据当前复选框的状态（选中或未选中），使用jQuery的方法来切换菜单的显示和隐藏，例如
show()和hide()。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox1">
<ul class="menu" id="menu1">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
<input type="checkbox" id="checkbox2">
<ul class="menu" id="menu2">
<li>菜单项4</li>
<li>菜单项5</li>
<li>菜单项6</li>
</ul>
<script>
$(document).ready(function() {
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$('#menu1').show();
} else {
$('#menu1').hide();
}
});
$('#checkbox2').click(function() {
if ($(this).is(':checked')) {
$('#menu2').show();
} else {
$('#menu2').hide();
}
});
});
</script>
</body>
</html>在上述示例中，我们为每个复选框和对应的菜单元素添加了唯一的ID。通过jQuery的click()事件处理函数，我们为每个复选框绑定了点击事件。在点击事件处理函数中，使用is(':checked')方法来判断复选框的选中状态，然后使用show()和hide()方法来切换菜单的显示和隐藏。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，这里无法提供相关链接。但腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以通过搜索引擎或腾讯云官方网站获取相关信息。
相关·内容
2回答
jQuery隐藏/显示2个菜单
jquery、html、menu
大家好！
我有以下问题:我有一个菜单为一个产品，另一个菜单为另一个产品。就像这样：
Product1 x- Product2
家庭Option1 Option2 Option3 x Option1 Option2 Option3
其中前3个选项用于Product1，最后3个选项用于Product2。我只需要看一种产品的菜单。
我的HTML是这样的(当然是简化的)：
<div class="products">
<a href="#" id="product1">Product1</a>
<a href=&
浏览 3提问于2013-08-01得票数 0
回答已采纳
2回答
在网页中间实现菜单
javascript、html、jquery、css
我正在实现一个在网页中间的菜单(注意:这不是一个顶部的导航菜单)。
这是默认状态：
人们可以点击其他菜单项来查看不同的内容。
我试着为一个菜单项写了下面的代码，它正在工作.但是，是否有一个优雅的解决方案，适用于每个菜单项？
<script>
$(function() {
$("#menu3").click(function(){
$(this).css({
'text-decoration':'underline',
'fon
浏览 0提问于2020-09-24得票数 0
回答已采纳
9回答
当用户返回页面时，如何使用jquery保持所选菜单处于活动状态？
javascript、jquery、html、css
我有一个典型的菜单结构-
<Ul class="nav">
<li>Menu1</li>
<li>menu2</li>
-------
</ul>
当我点击某个菜单时，根据我在加载layout.html时编写的jquery，它会选择特定的菜单。
<script>
jQuery(function(){
jQuery('.nav>li>a').each(function(){
if(this.href.trim() == window.
浏览 0提问于2013-11-22得票数 2
1回答
Jquery导航菜单
javascript、jquery、html
上面的代码不能正常工作。我需要使用Jquery实现一个带有子菜单项的简单菜单。当我打开网页时，我看到所有菜单和子菜单的内容都在一起(就像一个堆栈)。我需要改进如下所示的JavaScript，以便正确地将内容分配给菜单项。因此，当我单击"menu2“时，应该会有DIV = "menu2”的内容。现在我在一个页面上看到了所有的内容。
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1">
<li class="topfirst"><a clas
浏览 1提问于2012-05-08得票数 1
回答已采纳
1回答
在Jquery中切换-无法按预期关闭菜单
jquery
我有个问题要显示和隐藏菜单。当用户第一次单击“显示菜单..”时链接时，应该会出现菜单。在第二次单击时，相同的菜单将消失。
<p><a id="showmenu1" href="#">Show menu 1</a></p>
<p><a id="showmenu2" href="#">Show menu 1</a></p>
<div id="menu1" class="topmenus">
&
浏览 1提问于2018-04-22得票数 0
回答已采纳
2回答
上下文菜单不显示子菜单
jquery、html、css
在这个中，我有一个菜单，当你点击画布时会显示出来。在“聚合”菜单项上方悬停时，右侧会出现第二个子菜单。
问题是，如果您从“聚合”中“鼠标退出”，然后再次输入，子菜单的位置将不再是它应该在的位置。这个密码怎么了？
HTML
<div id="canvas" style="width:400px;height:400px;background-color:#ff33ff;"></div>
<div id="menu1" class="context-menu">
<u
浏览 3提问于2016-07-06得票数 0
回答已采纳
2回答
单击菜单时出现短暂的子菜单项后消失
javascript、jquery、html、css、wordpress
我是新来的。我有一个WordPress站点的。单击products菜单项时，子菜单项会在短暂出现后消失。ALso，则单击菜单项将导致重新加载页面
当我点击了产品的子菜单出现和去，但我需要的子菜单去了一段时间。下面是jquery代码：
<script>
$(document).ready(function() {
$('.home').addClass('current-menu-item');
$('.navigation ul ul li a').hide();
$(
浏览 1提问于2014-06-11得票数 0
2回答
只使用jquery或javascript在每次单击时打开一个层次深的子菜单。
javascript、html、jquery
我的问题是：
当我点击"menu2“时，它显示的是子菜单和所有子菜单的选项。
预期结果：
点击"menu2“应该只打开”sub 2“，而不是”sub 2“选项。点击“子菜单2”应该打开所有它的孩子。
我看到有一些与这个有关的问题，但我没有发现任何类似我的问题。如果您可以建议一种在纯JS/ES中这样做的方法，那就太好了。目前我正在使用jQuery。
$('.container > ul > li').on('click', function(){
$('ul',this).toggle(200);
浏览 5提问于2020-07-30得票数 0
回答已采纳
1回答
我需要在不更改页面的情况下更改链接
jquery、hyperlink
我有一个网站，使用Jquery，所以当我点击菜单“联系”它会打开一个联系页面，但链接仍然是一样的，我想更改为" index.html#contact“当我点击在菜单上的联系，如果有人复制链接index.html#contact它自动打开联系页面。
这就是全部:)提前谢谢！
Html：
<div class="mainbox">
<div class="main">
<a><div class="menu" id="menu1">
浏览 2提问于2013-07-21得票数 1
1回答
带有ng显示的AngularJS子菜单
angularjs、angularjs-directive、ng-show
我做了一个指令，里面有菜单项，其中有些菜单项有子菜单项。指令，以便当您单击菜单项时，它将打开其子菜单。我的问题是，当我点击一个菜单项时，它会打开它的子菜单，而当我单击另一个菜单项时，它也会打开它，所以我打开了两个子菜单。
我希望它关闭所有其他子菜单时，我点击菜单项，并打开只点击菜单子菜单。我怎么发动汽车呢？
我的html代码：
<menu visible="leftVisible" alignment="left">
<menu-item hash="first" show="menu1">
Si
浏览 2提问于2017-05-11得票数 0
回答已采纳
1回答
繁琐的JQuery选择器
jquery、jquery-selectors
我试着教自己一些简单的JQuery，并想出下面的菜单系统。它是一个基本的嵌套UL和基于LI的菜单，内部UL用JQuery .show()显示，用.hide()隐藏。HTML格式如下：
<ul id="menu1" class="gtrmenu">
<li><span class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Single Menu</span&
浏览 0提问于2012-12-27得票数 2
回答已采纳
2回答
使js过滤器工作以显示菜单
javascript、jquery、html、css
嗨，伙计们，我现在正在为餐厅菜单建立一个简单的过滤器。我有三个菜单，"menu1" "menu2" "menu3"，我希望客户能够点击一个按钮，这将显示正确的菜单。然而，由于某种原因，我似乎根本无法让它发挥作用。
所以我希望它一开始就显示"menu1"，所以我给了"menu2 & 3"一个display: none;，当用户点击按钮显示menu2 or 3时，它会显示正确的菜单，但是我无法让它工作：
HTML：
<div class="container">
&l
浏览 1提问于2017-11-27得票数 0
回答已采纳
3回答
带有多个复选框的Jquery下拉列表不会保存状态。
javascript、jquery、html、twitter-bootstrap
我有一个引导下拉列表，它有多个复选框。当我关闭并重新打开它时，默认情况下所有复选框都未选中。当我重新打开下拉列表时，我想查看先前选中了哪些复选框。
JSFiddle：
HTML：
<ul class="inline unstyled">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle select-value" data-placement=&#
浏览 1提问于2015-05-18得票数 0
回答已采纳
1回答
如何在jquery中加载缩略图
jquery、navigation
大家好，我正在设计一个垂直导航的首页page.the第一个垂直菜单是一个links.each列表，当点击时应该加载一组垂直平行于主菜单的缩略图list.my发出的jscript加载页面上的两个缩略图。它应该只有第一个菜单thumbnails.and当第二个菜单被点击时，它应该只加载第二组缩略图。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
浏览 3提问于2013-05-26得票数 0
4回答
在jQuery中使用选择器选择元素
jquery、list、jquery-selectors、checkbox
我想用jQuery选择一个元素。
<ul>
<li><label><input type="checkbox" class="checkbox">checkbox1</label></li>
<ul class="list">
<li>lorem</li>
<li>lorem</li>
<li>lorem</li&
浏览 1提问于2012-05-22得票数 1
回答已采纳
1回答
使用jquery的响应菜单
javascript、jquery、html、css
我在做响应菜单。当我们调整屏幕大小时，菜单项将向下显示，工作正常，但问题是红色按钮上的onClick工作正常。当我刷新页面时，所有项目都可见。我想在它被隐藏之前，点击红色的按钮，菜单就会出现。它是这样的，我想隐藏溢出菜单 ? onClick工作得很好。在单击之前，它将被隐藏 ? I have taken inspiration from here var h = 30;
var val = 0;
$('.click').click(function() {
if ($('ul li.menu-item').hasClass('show
浏览 14提问于2019-01-09得票数 2
3回答
单击子菜单时，jQuery菜单正在折叠
jquery、slide、collapse、submenu
我正在尝试让jquery幻灯片菜单工作，但我现在没有想法了。如何在点击子菜单项时停止菜单折叠？
这是我到目前为止得到的- js- part，导航代码，最后是相关的css部分：
<script type="text/javascript">
$(document).ready(function() {
$('ul .sub').hide();
$("li:has(.sub)").click(function() {
$("ul", thi
浏览 1提问于2013-06-07得票数 0
回答已采纳
4回答
在相应菜单悬停时显示图像
jquery、html、css
当光标悬停在像这样的菜单上时，我如何使用jquery或css显示具有效果的图像？
我可以只使用css，还是必须使用jquery？
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("
浏览 0提问于2013-09-16得票数 0
1回答
jquery中的菜单项突出显示
jquery、html
当我单击菜单项时，当我删除窗口滚动事件时，当前菜单不会被高亮显示，而是在它得到highlight.But之前得到一个菜单，然后它就会正常工作。我尝试了off()方法，但是它造成了标题位置问题。
$(document).ready(function() {
$(window).scroll(function(event) {
$('.navmenu ul li').find('a').each(function(i) {
var s_top = $(this).attr('href');
浏览 2提问于2015-10-29得票数 0
回答已采纳
2回答
jquery:水平导航栏菜单上的向下滑动和向上滑动
jquery、menu、slidedown、slideup、navigationbar
我正在尝试使用jquery创建一个简单的show子菜单，在悬停时使用简单的向上或向下滑动动画。
当我有#menu1和#menu2时，它工作得很好。但代码中存在重复。
如何让sub1和sub2在不重复代码的情况下上下滑动？
我还想用橙色显示sub1和sub2，用蓝色显示下拉列表。然而，现在所有的显示都是蓝色的。
谢谢。
我的代码：
<style type="text/css">
ul{
list-style-type:none;
margin:0;
padding:0;
background-color:#FF9900;
}
li {float:left;
displ
浏览 0提问于2012-07-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
