jquery中继行中的下拉列表行中不工作

Question

我有一个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> 

Answer 1

我认为这个问题是该转发器的创建与ID的多个元素：“选项”。

尝试将类分配给这个元素，而不是像这样：

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