Javascript 如何展开和折叠列表

下面的操作很好。但它只适用于收入的第一个实例，其他实例只是显示列表，没有折叠或扩展。当用户单击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>

函数prepareList（）{
$（“#expList”）.find（'li:has（ul）'
。单击（功能（事件）{
if（this==event.target）{
$（this.toggleClass（'expanded'）；
$（this.children（'ul'）。toggle（'medium'）；
}
返回false；
})
.addClass（'折叠'）
.children（'ul'）.hide（）；
};
$（文档）.ready（函数（）{
准备人员（）
});

您的选择器可能就是这里的问题所在。此外，我觉得你试图做太多与您的链接。请尝试以下代码的重构版本：

$(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个列表项的数组。如果选择正确，请在

onListItem中添加一个日志单击
回调并注销
此
是什么等。
它不起作用。我不知道如何使用日志。我是JavaScription新手，我个人使用Chrome进行调试，所以我的建议是使用这个浏览器。导航到
View>Developer>Developer Tools
或按
ALT+CMD+I
。这将打开开发者工具面板。从那里你可以看到顶部有一系列的标签。点击控制台。这将显示JavaScript警告、错误和日志。要在控制台中记录一些东西，您需要编写
console.log（'helloworld'）–您可以通过直接在控制台中编写此代码来测试，因为它是交互式的。要记录您的选择，请粘贴
console.log（$listItem）在其声明下面。