2

アコーディオンを Web アプリに統合しようとしています。ヘッダーがクリックされたときに、シェブロン ダウン アイコンとシェブロン アップ アイコンを切り替えたいと考えています。現在、私が持っているものは、他のすべてのアコーディオン インスタンスに対してのみ機能しているようです (それぞれにコメントを含むブログ エントリのページがあり、コメントは展開可能です)。私は何を間違っていますか？

コメント.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>

コメント.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);

ここに画像の説明を入力

4

1 に答える 1

1

これが私がそれを解決した方法です：

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

そして、ヘッダーのクラス仕様を削除しました!

于 2013-06-07T15:58:35.617 に答える