使用jQuery激活子代或孙子时保持菜单打开

时间：2019-06-16 04:37:02

标签： javascript jquery

我无法更改生成的HTML。

就像标题中所说的，如果条款2中的孙子Terms II是活跃的，则Terms 2 > Terms B应该保持开放状态。同样，如果孩子在条款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);
}

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题