LI上的jQuery单击功能在IE中不起作用 [英] jQuery click function on LI doesn't work in IE

问题描述

我有一个让我疯狂的问题。我是一个相对的Javascript新手，所以请善待：）。

I have a problem which is driving me nuts. I'm a relative Javascript newbie so please be kind :).

我有一些左侧导航菜单的现有代码，它使用了jQuery的Treeview插件（< a href =http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ =nofollow noreferrer> http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ ）。为了快速解释它，订单项下面有更多订单项，带有图片的小div（通常是箭头）将附加到订单项，此小div可以点击以展开其下的订单项。

I have some existing code for a left navigation menu that makes use of the Treeview plugin for jQuery (http://bassistance.de/jquery-plugins/jquery-plugin-treeview/). To quickly explain it, where a line item has more line items under it, a little div with an image (usually an arrow) will be appended to the line item and this little div is clickable to expand the line items under it.

这一切都非常好，但我希望现在忽略小div并允许用户点击订单项上的任意位置以展开其下的项目。

That's all very good, however I wish to now ignore the small div and allow the user to click anywhere on the line item to expand the items under it.

菜单代码的片段：

<div class="page-body-left" id="leftmenu">
<ul>
<li class="expandable" style="background-color: red;"><a class="createlink" href="link1">link1</a>
<ul style="display: none;">
    <li><a class="createlink" href="link1a">link1a</a></li>
    <li class="last"><a class="createlink" href="link1b">link1b</a></li>
</ul>
</li>

我添加了在此代码中尝试将我想要的功能添加到document.ready函数中：

I added in this code to try and add the functionality I wanted into the document.ready function:

jQuery("#leftmenu ul > li.expandable").click(function () {
    alert("Clicked!");
    jQuery(this).children("ul").slideToggle("fast");
});

这在Firefox中运行良好。但是在IE6和IE7都没有任何反应，甚至没有警报。但是，如果你单击链接本身，行为是正确的（但当然除了你被导航离开页面的事实）。

This worked fine in Firefox. However in both IE6 and IE7 nothing happens, not even the alert. However if you click on the link itself, the behaviour is correct (but of course aside from the fact that you are navigated away from the page).

我有些事情我试过的是：

Some things I've tried are:

• 将div中的ul包装为点击但不起作用。


• 添加jQuery（'＃leftmenu ul> li.expandable'）。css（'background-color'，'red'）;工作。


• 从菜单上下文中拉出列表至少显示警告，但我想避免重写轮子并希望重用尽可能多的Treeview插入类。


• 将点击功能绑定到标准div工作。

• Wrapping the ul in divs to click on instead but didn't work.
• Adding "jQuery('#leftmenu ul > li.expandable').css('background-color','red');" works.
• Pulling the list out of the menu context did at least display the alert, but I want to avoid rewriting the wheel and want to reuse as much of the Treeview inserted classes as I can.
• Binding the click function to a standard div works.

有人可以看到我在哪里出了问题？ Treeview搞砸了我的点击功能吗？如果是这样的原因是什么？令人沮丧的是它在Firefox中工作得很好而不是IE！

Can someone see where I've gone wrong? Is Treeview messing with my click function? If so what is causing this?? It is so frustrating that it's working fine in Firefox and not IE!

谢谢，
Jenny

Thanks, Jenny

推荐答案

是的，你好像是你的选择者。为什么不直接引用UL元素？

yeah seems like your selectors. why not directly reference to the UL element?

<div class="page-body-left" id="leftmenu">
<ul id="topmost">
  <li class="expandable" style="background-color: red;"><a class="createlink" href="link1">link1</a>
    <ul style="display: none;">
        <li><a class="createlink" href="link1a">link1a</a></li>
        <li class="last"><a class="createlink" href="link1b">link1b</a></li>
    </ul>
  </li>
</ul>
</div>

jQuery：

jQuery("#topmost li.expandable").click(function () {
        alert("Clicked!");
        jQuery(this).children("ul").toggle("fast");
});

此外，slideToggle对我不起作用。所以我改变了切换。它工作得很好。

Also, slideToggle didn't work for me. so i changed to toggle. it worked nicely.

这篇关于LI上的jQuery单击功能在IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！