切換複選框列表MVC

Question

我有三個充滿複選框的菜單。我希望能夠點擊菜單向上和向下滑動的每個菜單。有沒有辦法在下面的jQuery的HTML做到這一點？

@foreach (string type in Model.ReportLists.Keys) 
      { 

       <div id="flip" class="type-container" > 

        <h4>@type</h4>     
        <div class="list-container" > 
         @Html.CheckBoxListFor(model => model.ReportLists[type].PostedItems.CBItemIds, 
            model => model.ReportLists[type].AvailableItems, 
            item => Model.convertName(item.Name), 
            item => item.Name, 
            model => model.ReportLists[type].SelectedItems, 
            MvcCheckBoxList.Model.Position.Vertical) 
        </div> 

        </div> 


      } 

Answer 1

問題是有點不清楚，但我認爲這是你在找什麼：

$(document).ready(function() { 
    $('.type-container').each(function() { 
     var $container = $(this); 
     $container.find('h4').on('click', function() { 
      $container.find('.list-container').slideToggle(); 
     }); 
    }); 
}); 

這也將工作，並且可能會略微高效：

$(document).ready(function() { 
    $('.type-container h4').on('click', function() { 
     $(this).closest('.type-container').find('.list-container').slideToggle(); 
    }); 
}); 

UPDATE

有趣。通過jsperf跑步。似乎第二個版本對初始化更有效，但第一個版本在切換複選框列表時更有效。因爲初始化是一次性成本，所以我建議使用第一個版本。