Jquery点击李不做显示/隐藏，因为它应该

Question

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

这里是代码

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>