IE7, JQuery, .nextAll () и 5-й круг Данте

Question

У меня есть форма, которая содержит скрытые разделы под каждым полем формы, которые раскрываются при нажатии ближайшей кнопки.

Несколько полезных заметок:

• .toggler AND .expand_collapse - сама кнопка, которая вызывает переключение (.expand_collapse это просто тип .toggler)
• .on - изменяет внешний вид кнопки, когда скрытый участок виден.
• .expand_me - скрытый раздел
• .above - это чисто модификатор макета, т. Е. Когда код переключения находится над меткой формы, это above, в противном случае это не так. 2 HTML-сценария внизу иллюстрируют это.

Вот JQuery:

// Toggling
    $('.toggler').click( function(){
        if ( $(this).nextAll('.expand_me:first').is(":visible") ){
           $(this).removeClass('on');
        } else {
            $(this).addClass('on');
        }
        $(this).nextAll('.expand_me:first').slideToggle(350);
    });

Вот два сценария в HTML:

# Scenario 1
<li class="string input optional stringish">
    <label id="name_label" for="name"> Name </label>
    <%= text_field_tag :name %>
</li>
<a class="toggler expand_collapse"></a>
<div class="expand_me"> My hidden section. </div>

# Scenario 2
<a class="toggler expand_collapse above topmost"></a>
<li class="string input optional stringish">
    <label id="city_label" for="city"> City </label>
    <%= text_field_tag :city %>
</li>
<div class="expand_me"> My hidden section </div>

В IE 7 работает только сценарий 1. В других браузерах (IE 8+, Chrome, FF и т. Д.) Оба сценария работают. Почему?

---

Прогресс

Я только что понял, что IE 7, похоже, не позволяет существовать никакому элементу в <ul>, кроме <li>. По этой причине он помещает мои .expand_me разделы в элемент списка, чтобы JavaScript находился не в том месте. Является ли лучший способ справиться с этим условным комментарием в JavaScript для IE 7? (этот javascript находится на странице .html.erb).