必须单击两次才能使 jquery 使用显示/隐藏正常运行

如何解决必须单击两次才能使 jquery 使用显示/隐藏正常运行

我正在尝试使用与每个元素相关的特定 url 来显示/隐藏元素（只需拥有一个 href，以便每个元素都有一个唯一的 url）。我写的代码只有在每个“a”标签被点击两次时才有效，否则它要么显示不相关的内容，要么完全隐藏它。我已经明确地将它们声明为 display:block 在我拥有的 css 文件中，所以我知道这不是问题，（除非我以某种方式做错了这部分）。

这是我正在使用的 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">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
    <div class="faq-container">
      -content goes here
    </div>
  </div>

javascript（构造函数从另一个文件中的“new Faq”获取参数）：

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

export default class Faq {

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

  this._bindEvents();
}

_bindEvents() {
  this.$navigation.on("click",".nav",(event) => {
    this._toggleContent();
  });
}

  _toggleContent() {
    this.$content.hide();
  if (window.location.href.indexOf("shipping") > -1) {
    this.$content.eq( "0" ).show();
  }
  else if (window.location.href.indexOf("returns") > -1) {
    this.$content.eq( "1" ).show();
  }
  else if (window.location.href.indexOf("custom") > -1) {
    this.$content.eq( "2" ).show();
  }
  else if (window.location.href.indexOf("replacements") > -1) {
    this.$content.eq( "3" ).show();
  }
  else if (window.location.href.indexOf("mostFAQs") > -1) {
    this.$content.eq( "4" ).show();
  }
  else if (window.location.href.indexOf("RAD") > -1) {
    this.$content.eq( "5" ).show();
  }
  else if (window.location.href.indexOf("environmental") > -1) {
    this.$content.eq( "6" ).show();
  }
  else {
    this.$content.eq( "7" ).show();
  }
}
}

相关的 SCSS：

    .faq-container {
      display: block;
      &:not(:first-child) {
        display: none;
      }
    }

有什么建议吗？