0

以下工作正常。但它仅适用于收入的第一个实例，其他实例只是显示列表而不会折叠或展开。当用户点击 revene.Amount 时，它应该展开并显示收入。Q1，收入。Q2，收入。Q3 和收入。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 回答