Jquery dropdown in repeater row not working in IE

I have an asp.net repeater and for one of the items in a row I want a jquery dropdown. I have found this example of a jquery dropdown: here

I have added it to my repeater, but I can't get it to work properly. In IE9 only the first dropdown will "drop", but in Chrome it all works fine. I know it's probably something to do with it knowing what the parent of the control clicked is but I do not have much experience with jQuery so I am struggling with working out what I need to do.

My Jquery is:

<script type="text/javascript">

$(document).ready(function () {
    $("#options li em").click(function () {
        var hidden = $(this).parents("li").children("ul").is(":hidden");
        $("#options>ul>li>ul").hide()
        if (hidden) {
            $(this).parents("li").children("ul").toggle()
        }
    });
});</script>

and a snippet of my repeater is as follows:

<asp:Repeater ID="rptProperties" runat="server">
        <ItemTemplate>
     开发者_StackOverflow社区       <div>eval("Item1")</div>
            <div>eval("Item2")</div>
            <div id="options">
               <ul>
                   <li>
                     <em>
                        <a href="#">
                           <span>
                              Options &nbsp;<img src="/images/downarrow.png" alt="dropdown" />
                           </span>
                        </a>
                     </em>
                     <ul style="display: none;">
                         <li><a href="#">option1</a></li>
                         <li><a href="#">option2</a></li>
                         <li><a href="#">option3</a></li>
                     </ul>
                     </li>
                 </ul>
             </div>
          </ItemTemplate>
 </asp:Repeater>

I think the problem is that the repeater is creating multiple elements with the id:"options".

Try assigning a class to this element instead like so:

<div class="options">

Then modify your selectors to find elements with this class instead of the id:

<script type="text/javascript">

$(document).ready(function () {
    $(".options li em").click(function () {
    var hidden = $(this).parents("li").children("ul").is(":hidden");
    $(".options>ul>li>ul").hide()
    if (hidden) {
        $(this).parents("li").children("ul").toggle()
    }
    });
});</script>