Javascript repeater行中的Jquery下拉列表在IE中不起作用

我有一个asp.net repeater，对于一行中的一项，我需要一个jquery下拉列表。 我发现了这个jquery下拉列表示例：

我已将其添加到我的中继器中，但无法使其正常工作。 在IE9中，只有第一个下拉菜单会“drop”，但在Chrome中，它可以正常工作。 我知道这可能与知道单击控件的父控件是什么有关，但我对jQuery没有太多经验，所以我正在努力确定我需要做什么

我的Jquery是：

<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>

$（文档）.ready（函数（）{
$（“#选项li em”）。单击（函数（）{
var hidden=$（this）.parents（“li”）.children（“ul”）.is（“：hidden”）；
$（“#选项>ul>li>ul”）.hide（）
如果（隐藏）{
$（此）.parents（“li”）.children（“ul”）.toggle（）
}
});
});

我的中继器的一个片段如下：

<asp:Repeater ID="rptProperties" runat="server">
        <ItemTemplate>
            <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>

我认为问题在于中继器正在创建多个id为“options”的元素

请尝试将类指定给此元素，如下所示：

<div class="options">

然后修改选择器以查找具有此类而不是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>

$（文档）.ready（函数（）{
$（“.options li em”）。单击（函数（）{
var hidden=$（this）.parents（“li”）.children（“ul”）.is（“：hidden”）；
$（“.options>ul>li>ul”）.hide（）
如果（隐藏）{
$（此）.parents（“li”）.children（“ul”）.toggle（）
}
});
});

我认为问题在于中继器正在创建多个id为“options”的元素

请尝试将类指定给此元素，如下所示：

<div class="options">

然后修改选择器以查找具有此类而不是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>

$（文档）.ready（函数（）{
$（“.options li em”）。单击（函数（）{
var hidden=$（this）.parents（“li”）.children（“ul”）.is（“：hidden”）；
$（“.options>ul>li>ul”）.hide（）
如果（隐藏）{
$（此）.parents（“li”）.children（“ul”）.toggle（）
}
});
});

你能粘贴它输出的HTML吗？我可以试试吗it@MarcoJohannesen谢谢你的回复！当下面的答案出现时，我正在准备代码！你能粘贴它输出的HTML吗？我可以试试it@MarcoJohannesen谢谢你的回复！当下面的答案出现时，我正在准备代码！啊!！当然我甚至没想到。具有相同id的多个元素！这就成功了。它在Chrome中工作的事实让我震惊！非常感谢。这很奇怪，你会认为Chrome会是更严格的浏览器。很乐意帮忙。啊！当然我甚至没想到。具有相同id的多个元素！这就成功了。它在Chrome中工作的事实让我震惊！非常感谢。这很奇怪，你会认为Chrome会是更严格的浏览器。很乐意帮忙。