Jquery点击Li没有做应有的显示/隐藏

Question

我有一个问题，我的jquery不显示和隐藏适当的元素。我有一个与FAQ的特定部分相关的项目列表，当单击每个Li时，它应该隐藏除了它所属的部分之外的所有部分。这工作得很好，直到我添加了"标签，因为每个标签都需要有一个特定的链接。当我这样做时，出于某种原因，无论我单击哪一个，都只显示第一部分，而其他所有部分都不显示。

代码

html:

<div class="faq-intro">
<div class="faq-list">
<ul id="main-nav">
<li class="nav active"><a href="#shipping">Shipping</a></li>
<li class="nav"><a href="#returns">returns</a></li>
<li class="nav"><a href="#custom">Custom Orders</a></li>
<li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
<li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
<li class="nav"><a href="#RAD">RAD Principles</a></li>
<li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
<li class="nav"><a href="#USA">MADE in the USA</a></li>
</ul>
</div>
</div>
<div class="second-faq-container">
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
<div class="faq-container">
main section content
</div>
</div

js

constructor($navigation, $content) {
this.$navigation = $navigation;
this.$content = $content;
}
this.$navigation.on("click", ".nav", (event) => {
this.$content.hide();
$(this.$content[$(target).index()]).show();
});

使用的参数有:

new Faq($("#main-nav"), $("div.faq-container"));

Answer 1

处理调整是在.nav的导航处理程序。我将该处理移到了构造函数中，以便按照代码原样获取错误，而不需要类的其余部分。

尝试下面的可运行示例。我给每个部分的内容添加了一个数字，以显示哪个引用与被单击的相对链接一起出现。

class Faq {
constructor($navigation, $content) {
this.$navigation = $navigation;
this.$content = $content;

this.$navigation.on("click", ".nav", (event) => {
this.$content.hide();
// The event.target references <a> tags, so use
// the related index based those tags within the parent.
$(this.$content[$('#main-nav li a').index(event.target)]).show();
});
}
}

new Faq($("#main-nav"), $("div.faq-container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq-intro">
<div class="faq-list">
<ul id="main-nav">
<li class="nav active"><a href="#shipping">Shipping</a></li>
<li class="nav"><a href="#returns">returns</a></li>
<li class="nav"><a href="#custom">Custom Orders</a></li>
<li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
<li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
<li class="nav"><a href="#RAD">RAD Principles</a></li>
<li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
<li class="nav"><a href="#USA">MADE in the USA</a></li>
</ul>
</div>
</div>
<div class="second-faq-container">
<div class="faq-container">
main section content 1
</div>
<div class="faq-container">
main section content 2
</div>
<div class="faq-container">
main section content 3
</div>
<div class="faq-container">
main section content 4
</div>
<div class="faq-container">
main section content 5
</div>
<div class="faq-container">
main section content 6
</div>
<div class="faq-container">
main section content 7
</div>
<div class="faq-container">
main section content 8
</div>
</div>