javascript - Accordion 菜单中的切换状态问题

Question

我有一个带链接的页脚，在移动 View 中，链接是隐藏的。

当用户单击标题时，链接应向下切换，标题旁边的图标应从加号图标变为减号图标。如此处所示，这不起作用。

当用户再次单击展开的标题时，该部分会折叠并且图标应返回加号，但仍保留为减号。

HTML

  <div class="row">
  <div class="col-lg-12">
    <div class="footer-links">
    <div class="row">
      <div class="panel-heading panel-columns panel">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#about" data-parent="#accordion">
            Header
          </a>
        </h4>
        <ul class="visible-sm visible-md visible-lg collapse" id="about">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </div>
      <div class="panel-heading panel-columns panel">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#why" data-parent="#accordion">
            Header
          </a>
        </h4>
        <ul class="visible-sm visible-md visible-lg collapse" id="why">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </div>
      <div class="panel-heading panel-columns panel">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#quicklinks" data-parent="#accordion">
            Header
          </a>
        </h4>
        <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </div>
      <div class="footer-offer-columns">
        <h4 class="deal-text"><strong>Ad text will</strong> go here</h4>
      </div>
      <div class="footer-share-columns">
        <div class="footer-share">
          <a href=""><img src="/img/facebook_icon.png"></a>
          <a href=""><img src="/img/twitter_icon.png"></a>
          <a href=""><img src="/img/linkedin_icon.png"></a>
          <a href=""><img src="/img/youtube_icon.png"></a>
          <a href=""><img src="/img/google_icon.png"></a>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

jQuery

$('.panel-heading').on('click', '.accordion-toggle', function (){
$(".accordion-toggle").each(function(){
  console.log($("this"));
  $(this).removeClass('visibility-status');
  console.log('open');
});

$(this).toggleClass('visibility-status');
});

CSS

.accordion-toggle:after {
  content: '+';
  font-family: 'Material Icons';
  font-size: 22px;
}
.accordion-toggle.visibility-status:after {
  content: '-';
  font-family: 'Material Icons';
  font-size: 22px;
}

Answer 1

尝试使用以下代码代替您的 jQuery。您目前没有检查当前被点击的页眉是否可见。您删除 visibility-status 类，然后切换它。这样做，它将始终打开类，因为您先将其删除。

$('.panel-heading').on('click', '.accordion-toggle', function() {
    //Store visible status of clicked header
    var isVisible = $(this).hasClass('visibility-status');

    //Remove visibility from all headers
    $('.accordion-toggle').removeClass('visibility-status');

    //Turn on the class if it was already off
    if (!isVisible) {
        $(this).addClass('visibility-status');
    }
});