как развернуть и перекрыть список

Question

Следующее работает нормально. Но его единственная работа для первого экземпляра другого экземпляра дохода просто показывает список без краха или расширения. Когда пользователь нажимает на 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> 

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 и т. Д. И т. Д.