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

Question

我无法更改生成的 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);
}

Answer 1

我建议:找到 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>