javascript - 当 child 或孙子使用 jQuery 处于事件状态时保持菜单打开-6ren

javascript - 当 child 或孙子使用 jQuery 处于事件状态时保持菜单打开

转载作者：行者123 更新时间：2023-11-30 19:29:08

我无法更改生成的 HTML。

如标题所示，如果 Terms 2 中的孙子 Terms II 处于事件状态，则 Terms 2 > Terms B 应保持打开状态。同样，如果 child Terms 3 中的 Terms I 处于打开状态，则 Terms 3 必须保持打开状态。我该怎么做？

JSFiddle 演示:https://jsfiddle.net/t2sz3ogv/

PS:我在 JSFiddle 中创建了 3 种不同的 HTML 来展示不同的场景，以方便您使用。

PSS:请注意，父级 Market 已永久隐藏。

HTML:

<div class="moduletable">
    <ul class="nav menupolicies">
        <li class="active deeper parent"><span class="nav-header hide">Market</span>
            <ul class="nav-child unstyled small">
                <li class="deeper parent"><a href="/market/terms">Terms 1</a></li>
                <li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
                    <ul class="nav-child unstyled small">
                        <li class=""><a href="/market/terms/termsa">Terms A</a></li>
                        <li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
                            <ul class="nav-child unstyled small">
                                <li class=""><a href="/market/terms/termsb/i">Terms I</a></li>
                                <li class="current active"><a href="/market/terms/termsa/ii">Terms II</a></li>
                                <li class=""><a href="/market/terms/termsa/iii">Terms III</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
                    <ul class="nav-child unstyled small">
                        <li class=""><a href="/market/terms3/i">Terms I</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

JS:

jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
  jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
  jQuery(this).find("img").toggleClass( "arrow" );
});

CSS:

.hide {
    display: none;
}
.menupolicies>li {
  width: 100%;
}
.menupolicies .parent {
  padding: 5px 0;
}
.menupolicies a, .menupolicies li {
  font-size: 14px;
  color: #333;
}
.menupolicies .active {
  font-weight: bold;
}
.nav {
    margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.menupolicies .parent span img {
  width: 24px;
  float: right;
}
.menupolicies .arrow {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

最佳答案

我建议:找到 li.active 的每个父级并显示它们:

$("li.active").parents('ul.nav, ul.nav-child').show();

jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
  jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
  jQuery(this).find("img").toggleClass( "arrow" );
});

$("li.active").parents('ul.nav, ul.nav-child').show();

.hide {
	display: none;
}
.menupolicies>li {
  width: 100%;
}
.menupolicies .parent {
  padding: 5px 0;
}
.menupolicies a, .menupolicies li {
  font-size: 14px;
  color: #333;
}
.menupolicies .active {
  font-weight: bold;
}
.nav {
	margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.menupolicies .parent span img {
  width: 24px;
  float: right;
}
.menupolicies .arrow {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduletable">
  <ul class="nav menupolicies">
    <li class="active deeper parent"><span class="nav-header hide">Market</span>
      <ul class="nav-child unstyled small">
        <li class="current active deeper parent"><a href="/market/terms">Terms 1</a></li>
        <li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms 2</span></span>
          <ul class="nav-child unstyled small">
            <li class=""><a href="/market/terms/termsa">Terms A</a></li>
              <li class="deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms B</span></span>
                <ul class="nav-child unstyled small">
                  <li class=""><a href="/market/terms/termsb/i">Terms I</a></li>
                  <li class=""><a href="/market/terms/termsb/ii">Terms II</a></li>
                  <li class=""><a href="/market/terms/termsb/iii">Terms III</a></li>
                </ul>
              </li>
            </ul>
          </li>
        <li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms 3</span></span>
          <ul class="nav-child unstyled small">
            <li class=""><a href="/market/terms3/i">Terms I</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<hr />
<div class="moduletable">
	<ul class="nav menupolicies">
		<li class="active deeper parent"><span class="nav-header hide">Market</span>
			<ul class="nav-child unstyled small">
				<li class="deeper parent"><a href="/market/terms">Terms 1</a></li>
				<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
					<ul class="nav-child unstyled small">
						<li class=""><a href="/market/terms/termsa">Terms A</a></li>
						<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
							<ul class="nav-child unstyled small">
								<li class=""><a href="/market/terms/termsb/i">Terms I</a></li>
								<li class="current active"><a href="/market/terms/termsa/ii">Terms II</a></li>
								<li class=""><a href="/market/terms/termsa/iii">Terms III</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
					<ul class="nav-child unstyled small">
						<li class=""><a href="/market/terms3/i">Terms I</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
<hr />
<div class="moduletable">
	<ul class="nav menupolicies">
		<li class="active deeper parent"><span class="nav-header hide">Market</span>
			<ul class="nav-child unstyled small">
				<li class="deeper parent"><a href="/market/terms">Terms 1</a></li>
				<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
					<ul class="nav-child unstyled small">
						<li class=""><a href="/market/terms/termsa">Terms A</a></li>
						<li class="deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
							<ul class="nav-child unstyled small">
								<li class=""><a href="/market/terms/termsb/i">Terms I</a></li>
								<li class=""><a href="/market/terms/termsa/ii">Terms II</a></li>
								<li class=""><a href="/market/terms/termsa/iii">Terms III</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
					<ul class="nav-child unstyled small">
						<li class="current active"><a href="/market/terms3/i">Terms I</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

关于javascript - 当 child 或孙子使用 jQuery 处于事件状态时保持菜单打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56616117/

文章推荐： c# - 获取特定文化的 DateTime.DayOfWeek

文章推荐： c#处理空格键事件

文章推荐： c - C 中使用 fread 和 fwrite 进行 block 读写

文章推荐： c# - 枚举当前 visual studio 项目中的所有文件

mysql - 处于 IN 状态的数据库字段
我正在尝试在 IN sql 条件下使用数据库字段。我的字段是一串由逗号分隔的值(如 it,en,fr,de)，我必须在 WHERE 子句中使用它，如下所示: WHERE d.iso639code =
flutter - 处于 Release模式时，网页浏览显示灰屏
他大家我的以下代码有问题: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp e
storage - 处于 ReadOnlyMany 模式的持久卷上的容量参数的用途是什么？
在处理 ReadOnlyMany 存储时，我正在努力理解 PersistentVolume 上的容量参数的概念，以及 PersistentVolumeClaim 上的存储请求。如果存储以只读方式安装
php - 尝试让 While 处于 while 循环中工作
我试图让一个 while 循环在另一个 while 循环中工作，我之前已经让它工作过，但无法再次管理它。我试图计算航类查询中的总记录，然后在小时记录中尝试添加时间。我已经让所有查询单独工作，但是当我
MySQL/InnoDB偶尔有些更新运行很慢，处于 'Updating'状态
我们的数据库更新性能偶尔会大幅下降。例如，表 FooTable 我们有大约 40 列与 varchar PK 此外还有 10 个索引。以下查询用时 44 秒，而在其他时候它几乎立即运行。在减速期间，
.net - Trace.WriteLine 处于 Release模式？
我可以在 Release模式下使用 Trace.WriteLine 吗？ Trace.Write 和 Debug.Write 之间的主要区别是什么？最佳答案不同之处在于 Release模式。当未
xcode - 处于 Xcode 断点时没有键盘响应 (Mac)
我刚刚遇到了一个非常奇怪的场景，并且在其他地方找不到任何相关信息。当 Xcode 在我的断点处中断时，整个系统的所有键盘输入都没有响应。我可以切换到另一个应用程序，但没有记录任何击键。 Xcode 本
处于 NotReady 状态的 Kubernetes 工作节点
我一直在尝试在一组 Raspberry Pi 上设置 K8s 集群。这是我的 GitHub 页面的链接，描述了整个设置: https://github.com/joesan/plant-infra/b
kubernetes - Pod 处于 Pending 状态
我的 pod 处于 Pending 状态，因为提到的所有答案我都试图获得描述输出但不知道为什么它保持在 Pending 状态: k8s@k8s-master:~/deployment$ kubectl
app-store - 处于“应用购买”状态将申请提交到Appstore后即可提交
我已经开发了一个非消耗性的应用内购买iOS应用程序。我已经获取了应用内购买的 bundle 包标识符，并编写了代码并将其提交给appstore ...提交应用程序后，其状态显示在-App Purcha
java - @OneToMany 处于 hibernate 状态
我有 2 个具有一对多关系的实体，一个地址可以是多个员工。 MySQL 数据库: 地址 address_id INT PK AutoIncr 城市 VARCHAR 国家/地区 VARCHAR 员工 i
java - Proguard 处于 Activity 状态时无法创建调用适配器崩溃
我想在我的项目中使用 ProGuard。我激活了选项 minifyEnabled。当我打开使用库 Retrofit2 的 Activity 时，应用程序崩溃并显示: 无法为接口(interface)
c# - 处于 Debug模式时的 Application Insights
我刚刚在 MVC 应用程序中启用了 Application Insights，并注意到在本地调试时，我的 Azure Application Insight 中会捕获跟踪信息。处于 Debug模式时
c++ - 当进程结束时，处于 Sleep() 中间的线程会发生什么？
我正在使用一个启动和结束线程的类。线程是在构造函数中创建的。只要标志为 TRUE，线程函数就会继续循环。该标志是该类的静态成员。解构器将标志设置为 FALSE。这样，该类的每个实例都有一个关联的线程，
Angular Service Worker 处于 SAFE_MODE
我有一个 Angular PWA。在我从 Angular 5.0 升级到 7.2 之前，它的 service worker 工作完美升级后，我在/ngsw/state中看到以下错误 Driver s
Android:IME 处于 Activity 状态时的布局是什么？
可能有一些背景:当用户单击它时，我试图在可滚动的全屏 EditText 上方显示一个特定的键盘 View 。问题是如果光标位于 EditText 的底部，它会被弹出的键盘 View 隐藏。与常规 I
android - 如何在 CircularProgressIndicator 处于 Activity 状态时禁用交互？
当进度条处于 Activity 状态时禁用后台交互的正确方法是什么。 Box( modifier = Modifier.fillMaxSize(), contentAlignmen
c# - 当 PictureBox 处于 'zoom' 模式时裁剪图像的正确部分
这个问题在这里已经有了答案: Draw Rectangle inside picture box SizeMode Zoom (1 个回答) 关闭 3 年前。我有一个 PictureBox1，其
kubernetes - 处于 CrashLoopBackOff 状态的 Kube flannel
我们刚刚开始在 kubernetes 上创建我们的集群。现在我们尝试部署分蘖，但出现错误: NetworkPlugin cni failed to set up pod "tiller-deploy
centos - Nagios 处于 OK 或 UP 状态时的重试间隔
我使用 NRPE 插件将一台 Linux 主机配置为 Nagios 监控服务器。为此，我遵循以下 URL http://www.tecmint.com/how-to-add-linux-host-t

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当 child 或孙子使用 jQuery 处于事件状态时保持菜单打开