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