这几乎可以正常工作，但是显示和隐藏存在一些问题。
当我点击How之后，我按一下What，然后我点击How它表明How儿童和What儿童为好，它不应该这样做。
如果我点击How，然后1.s，然后我点击What我想隐藏的第三列，以及，我没有任何想法，谁我可不可以这样做。
这段代码类似于菜单系统。
$(".second").children().hide();
$(document).on("click", ".first li", function() {
var firstClass = $(this).children("a").attr('class');
$(".second").find('.' + firstClass).prev().hide();
$(".second").find('.' + firstClass).show();
$(document).on("click", ".second ."+firstClass+" li", function() {
var season = $(this).children("a").index()+1;
var episodeNumber = $(this).children("a").attr("value");
var htmlCode = '';
for(let i = 1; i <= episodeNumber; i++) {
htmlCode += '<ul><li><a href=#>' + i + ".r" +'</a></li><ul>';
}
$(".third").find("." + firstClass).find("." + season).html(htmlCode);
});
});* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.main {
display: flex;
}
.first {
width: 40vw;
}
.second {
width: 20vw;
}
.third {
width: 20vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<ul>
<li><a href="#" class="HowI">How</a></li>
<li><a href="#" class="Whater">What</a></li>
</ul>
</div>
<div class="second" >
<div class="HowI">
<ul>
<li><a href="#" value="3">1. s</a></li>
<li><a href="#" value="1">2. s</a></li>
<li><a href="#" value="2">3. s</a></li>
</ul>
</div>
<div class="Whater">
<ul>
<li><a href="#" value="2">1. s</a></li>
</ul>
</div>
</div>
<div class="third">
<div class="HowI">
<div class="1"></div>
<div class="2"></div>
</div>
<div class="Whater">
<div class="1"></div>
</div>
</div>
</div>在下面的代码片段中，我使用了先隐藏所有内容，然后显示您需要显示的内容的方法。我首先隐藏了 .second 的每个孩子，而不是显示单击的一个项目。第三个也一样。注意。隐藏所有 .third 子项说明需要先显示 .third 子项，然后才能搜索它的子项。
$(".second").children().hide();
$(document).on("click", ".first li", function() {
var firstClass = $(this).children("a").attr('class');
$(".second").children().hide();
$(".third").children().hide();
$(".second").find('.' + firstClass).show();
$(document).on("click", ".second ."+firstClass+" li", function()
{
var season = $(this).children("a").index()+1;
var episodeNumber = $(this).children("a").attr("value");
var htmlCode = '';
for(let i = 1; i <= episodeNumber; i++) {
htmlCode += '<ul><li><a href=#>' + i + ".r" +'</a></li><ul>';
}
$(".third").find("." + firstClass).show();
$(".third").find("." + firstClass).find("." + season).html(htmlCode);
});
});* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.main {
display: flex;
}
.first {
width: 40vw;
}
.second {
width: 20vw;
}
.third {
width: 20vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="main">
<div class="first">
<ul>
<li><a href="#" class="HowI">How</a></li>
<li><a href="#" class="Whater">What</a></li>
</ul>
</div>
<div class="second" >
<div class="HowI">
<ul>
<li><a href="#" value="3">1. s</a></li>
<li><a href="#" value="1">2. s</a></li>
<li><a href="#" value="2">3. s</a></li>
</ul>
</div>
<div class="Whater">
<ul>
<li><a href="#" value="2">1. s</a></li>
</ul>
</div>
</div>
<div class="third">
<div class="HowI">
<div class="1"></div>
<div class="2"></div>
</div>
<div class="Whater">
<div class="1"></div>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句