Question

以下工作正常。但它仅为收益其他实例的第一个实例工作只是显示列表而不会崩溃或扩展。当用户点击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>

Answer 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等等。

如何扩展和折叠列表

1 个答案: