转发器行中的Jquery下拉列表在IE中不起作用

时间:2011-10-14 09:11:07

标签: javascript jquery asp.net repeater

我有一个asp.net转发器,连续的一个项目我想要一个jquery下拉列表。 我找到了一个jquery下拉列表示例:here

我已将它添加到我的转发器中,但我无法让它正常工作。 在IE9中,只有第一个下拉列表会“掉线”,但在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>

我的中继器的片段如下:

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

1 个答案:

答案 0 :(得分:1)

我认为问题在于转发器正在使用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>