Question

我有一个带链接的页脚，在移动视图中，链接被隐藏。

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

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

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');
    }
});

手风琴菜单

1 个答案: