Question

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

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

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

菜单代码的片段：

<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函数：

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

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

我尝试过的一些事情是：

将div中的ul包装为点击但不起作用。
添加“jQuery（'＃leftmenu ul＆gt; li.expandable'）。css（'background-color'，'red'）;”作品。
从菜单上下文中拉出列表至少显示警告，但我想避免重写轮子，并希望尽可能多地重用Treeview插入的类。
将点击功能绑定到标准div。

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

谢谢，珍妮

Answer 1

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

<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对我不起作用。所以我改变了切换。它工作得很好。

Answer 2

我没有测试过您的代码，但这有点像Sizzle（选择引擎）中的错误。

无论如何;您不必指定给定元素的完整路径。试试这个尺寸：

"#leftmenu .expandable"

旁注：一般来说;选择器越复杂，它们运行得越慢。

Answer 3

感谢你们两位，选择者确实是罪魁祸首 - 如果我可以投票我会，但它不会让我:)。

有时候我并不完全确定我在选择器上做了什么，因为它有时会起作用，但是当它不起作用时，我会尝试其他各种各样的事情。

我想知道为什么它在Firefox中有用......

它仍然无法在IE6中运行 - 但我知道的其他一些脚本也不适用于其他设计，所以我认为这是另一个问题。

再次感谢！

Answer 4

我假设link1将扩展link1a和b。你为什么不试着这样做呢？这项工作适合我。

<li li class="expandable" style="background-color: red;">
    <a class="createlink" onclick="return false;" href="#">Link1</a>
    <ul style="display: none;">
      <li>....</li>
      <li>....</li>
    </ul>
</li>

所以你只需要添加onclick和href =“＃”，对吗？

LI上的jQuery单击功能在IE中不起作用

4 个答案: