JQuery Accordion : Swap Bootstrap Icons

Question

我正在尝试将 Accordion 集成到我的网络应用程序中，并且我想在单击标题时在 V 形向下和 V 形向上图标之间切换。现在，我所拥有的似乎只适用于所有其他 Accordion 实例(我有一页博客条目，其中每个条目都有评论，并且评论是可扩展的)。我做错了什么？

comments.html.erb

   <div class="userComments">
    <div class="accordion">
      <h5 class="icon-chevron-down"> Comments (<%=step.comment_threads.count%>)</h5>
      <div class="comment">  
        <div class="userIcon">
          <%= image_tag(current_user.avatar_url(:thumb), :class=>"commentAvatar img-polaroid")%>
        </div class="addComment">
           <%= semantic_form_for([@project, step, step.comment_threads.build]) do |f| %>
            <div class="field">
              <%= f.text_area :body %>
            </div>
        <div class="submit">
          <%= f.submit :comment, :class=> "btn btn-small btn-primary commentSubmit" %>
        </div>
        <% end %>

         <div class="clear"></div>
      <div class="stepComments">
        <% if step.comment_threads.count >0 %>
          <% step.comment_threads.each do |stepComment| %>
            <% if stepComment.body.length>0 %>
              <%= render :partial => 'comments', :locals => {:comment=> stepComment, :step=>step} %>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
      </div>
    </div>

comment.js

  (function($) { 

    $('.accordion').accordion({
      collapsible: true, 
      heightStyle: "content",
      active: false,
    });

    $('.accordion h5').hover(function(){
      $(this).css("color", "#0769AD");
    },
    function(){
      $(this).css("color", "#000");
    });

    $('.accordion h5').click(function(){
      console.log('switching');
      if($(this).hasClass("icon-chevron-down")){
        $(this).removeClass("icon-chevron-down");
        $(this).addClass("icon-chevron-up");
      }
      else{
        $(this).removeClass("icon-chevron-up");
        $(this).addClass("icon-chevron-down");
      }
    });

  })(jQuery);

Answer 1

这是我解决这个问题的方法:

    $('.accordion').accordion({
      collapsible: true, 
      heightStyle: "content",
      active: false,
      icons:{
        header: "icon-chevron-down",
        activeHeader: "icon-chevron-up"
      }
    });

然后我删除了 header 的类规范!