Jquery 点击 Li 没有做 show/hide 它应该做的事

Question

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

这是代码

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.

的其余部分

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

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>

Jquery 点击 Li 没有做 show/hide 它应该做的事

Jquery clicking on Li not doing show/hide as it should

html

javascript

jquery

toggle

show-hide