jQuery Accordion在點擊時更改字體真棒圖標類

Question

我有一個關於我發現的簡單jQuery手風琴的問題。

我想使用Font Awesome圖標來指示帶有加號和減號圖標的活動/非活動狀態。 在我的JSFiddle中，您可以看到帶有加號圖標的手風琴標題。 單擊標題時，“fa-plus”類需要更改為“fa-minus”。

我已經使用add和removeClass做了一些測試，但是我無法讓它工作。 我真的是一個jQuery / javascript菜鳥！ 希望你們能幫助我:-)。

jQuery('.accordion dt').click(function() {

    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }
});

jQuery('.accordion_content').hide();

http://jsfiddle.net/XrGU8/

Answer 1

為什么不鏈接代碼而不是重復自己：

jQuery('.accordion dt').click(function() {
    jQuery(this).find('i').toggleClass('fa-plus fa-minus')
                .closest('dt').next().slideToggle()
                .siblings('.accordion_content').slideUp();
});

jQuery('.accordion_content').hide();

更新小提琴

---

更新：

您的最終代碼應如下所示：

jQuery('.accordion dt').click(function() {
    jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
           .closest('dt').siblings('dt')
           .removeClass('active').find('i')
           .removeClass('fa-minus').addClass('fa-plus');

    jQuery(this).next('.accordion_content').slideToggle()
                .siblings('.accordion_content').slideUp();  
});

jQuery('.accordion_content').hide();

更新小提琴

Answer 2

jQuery('.accordion dt').click(function() {
    $(this).find('i').toggleClass('fa-plus fa-minus') // add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();

演示

---

jQuery('.accordion dt').click(function() {
    $('.accordion dt').find('i').removeClass('fa-minus'); // Hides the minus sign on click
    $(this).find('i').addClass('fa-plus fa-minus'); // add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();

單擊其他選項卡時，演示將刪除減號

Answer 3

這是一個很好的解決方案，但是當使用第一個打開的標簽時，它會變得有點混亂。 但是你只能使用css來完成這項工作。 我正在使用bootstrap手風琴和字體很棒，我用它創建了自定義圖標，所以當標簽關閉時，它會獲得關閉的圖標，當它打開時，它會獲得另一個圖標。 這是html代碼：

<div class="accordion-group">
 <div class="accordion-heading">
   <a class="accordion-toggle accordion-icon-arrow-circle" href="#collapseOne" data-   toggle="collapse" data-parent="#accordion2">
    <span class="accordion-icon"></span> 
   Accordion Title
   </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">Here will be the accordion text</div>
 </div>
</div>

而這里是css風格：

.accordion-icon-arrow-circle {
   position:relative
}

.accordion-icon {
  position: absolute;
  left: 7px;
  top: 7px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 21px;
  text-align: center;
  font-size: 14px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
.accordion-icon-arrow-circle .accordion-icon:before { 
  content: "\f0ab"; 
}
.accordion-icon-arrow-circle.collapsed .accordion-icon:before { 
  content: "\f0a9"; 
}

我曾經將額外的.accordion -icon-arrow-circle類添加到accorion標題中，當點擊手風琴標題時，bootstrap.js會調用.collapsed類。