0

以下は正常に動作しています。しかし、収益の最初のインスタンスに対してのみ機能し、他のインスタンスは折りたたんだり展開したりせずにリストを表示するだけです。ユーザーが revene.Amount をクリックすると、展開されて、revenue.Q1、revenue.Q2、revenue.Q3、revenue.Q4 が表示されます。デフォルトでは、すべてが折りたたまれている必要があります。

<% @estate.revenues.each do |revenue| %>    
  <tr>
    <td><%= revenue.Year %></td>
    <div id="listContainer">
      <ul id="expList">
        <li>
          <%= revenue.Amount %>
          <ul>
            <li><%= revenue.Q1 %></li>
            <li><%= revenue.Q2 %></li>
            <li><%= revenue.Q3 %></li>
            <li><%= revenue.Q4 %></li>
          </ul>
        </li>
      </ul>
    </div>
    <%= link_to 'Destroy', estate_revenue_path(@estate,revenue), method: :delete, data: { confirm: 'Are you sure?' } %>
    <%= link_to 'Edit', edit_estate_revenue_path(@estate,revenue) %>
    <%= link_to 'View', estate_revenue_path(@estate,revenue) %>
    <br/>
  </tr>
<% end %>
<br />

<%= link_to 'New Revenue', new_estate_revenue_path(@estate.id) %>

<script>
    function prepareList() {
        $('#expList').find('li:has(ul)')
                .click( function(event) {
                    if (this == event.target) {
                        $(this).toggleClass('expanded');
                        $(this).children('ul').toggle('medium');
                    }
                    return false;
                })
                .addClass('collapsed')
                .children('ul').hide();
    };
    $(document).ready( function() {
        prepareList()
    });
</script>
4

1 に答える 1

1

あなたのセレクターがここで問題になる可能性があります。さらに、チェーンでやりすぎているように感じます。以下のリファクタリングされたバージョンのコードを試してください。

$(function() {

    var $list = $('#expList'),
        $listItem = $list.find('ul li'),
        $listItemChildren = $listItem.children('ul');

    function prepareList() {            
        $listItemChildren.hide();
        $listItem.addClass('collapsed');
        $listItem.on('click', onListItemClick);
    };

    function onListItemClick(event) {
        $this = $(this);
        if (this == event.target) {
            $this.toggleClass('expanded');
            $this.children('ul').toggle('medium');
        }
        return false;
    };

    prepareList();

});

クロージャーの最初の数行で行ったように、セレクターをキャッシュすることをお勧めします。それでも問題が解決しない場合は、ログに記録$listItemして、予想される 4 つのリスト項目を含む配列が含まれていることを確認してください。選択が正しければ、コールバック内にログを追加し、何が何であるかなどonListItemClickをログアウトします。this

于 2013-06-10T15:50:14.857 に答える