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: '\E145';
  font-family: 'Material Icons';
}
.accordion-toggle.visibility-status:after {
  content: '\E15B';
  font-family: 'Material Icons';
}

Answer 1

首先要对要添加的类进行硬编码，然后只需执行两次toggleClass调用：

$('.collapse').on('shown.bs.collapse', function() {
    $(this).parent().find('.zmdi-minus').toggleClass('zmdi-plus').toggleClass('zmdi-minus');
}).on('hidden.bs.collapse', function() {
    $(this).parent().find('.zmdi-plus').toggleClass('zmdi-plus').toggleClass('zmdi-minus');
});

<强> https://jsfiddle.net/damo_s/nt4q2q29/

修改

（根据您的评论），我们也可以简化它：

$('.accordion-toggle').on('click', function() { $(this).find('.zmdi').toggleClass('zmdi-plus').toggleClass('zmdi-minus'); });

<强> https://jsfiddle.net/damo_s/nt4q2q29/3/

编辑2：

材质图标似乎要求你在标签之间而不是作为一个类放置图标，所以我使用jQuery的html()修改了一些代码，并检查硬编码的类我是在这种情况下添加到标记add，我们检查，然后有条件地添加内容。最后我们切换课程：

$('.accordion-toggle').on('click', function() { var $icon = $(this).find('.material-icons'); if ($icon.hasClass('add')) { $icon.html(''); } else { $icon.html(''); } $icon.toggleClass('add'); });

<强> https://jsfiddle.net/damo_s/h2r83ps9/

Answer 2

您可以通过执行以下操作进行切换：

//When the user clicks on the header/or any other div where you want to display toggle data
$('IdOfTheDivInHeader').click(function(){
 $('IdOfTheDivYouWantToDisplayOnToggle').toggle();
});

您还可以阅读有关jquery .toggle()方法

的更多信息

希望能帮到你！

单击标题时按手风琴切换图标

2 个答案: