1

我正在使用 jQuery 设计一个可扩展的列表（我是 jQuery 的新手）。可扩展列表在 IE 上运行良好，但在 Firefox/Chrome 上运行良好。

在调试时，我发现对于 firefox/chrome，我可以得到alert('hiiii prepare ORIGINAL')，但在那之后什么也没有。更多的调试表明function(event)没有被执行。

代码哪里出错了？这不是完全由我准备的代码，而是从网上获得并为我的目的进行了修改。原始代码的功劳归于其作者。

我正在使用 Firefox 版本 20.0.1 和 IE 版本 9，jQuery 版本 1.4.2。

js代码： 

function prepareList() {
    alert('hiiii prepare ORIGINAL');
    $('#expList').find('li:has(ul)').click(function (event) {
        alert('inside');
        if(this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        //return false;
    }).addClass('collapsed').children('ul').hide();

    //Create the button functionality
    $('#expandList').unbind('click').click(function () {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList').unbind('click').click(function () {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })
    // alert('END prepare ORIGINAL');  
};

$(document).ready(function () {
    prepareList();
});

CSS：

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../../tree/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../../tree/img/expanded.png);
}
#expList {
    clear: both;
}

编辑 1：
我在这里发布了一个小提琴（感谢 Rocket Hazmat 的创建）http://jsfiddle.net/vrnqA/2/。在这个小提琴中，当我们单击图像时，列表会展开和折叠。它在 IE 中以同样的方式发生，但在 Firefox 中则不然。这是与 jQuery 版本有关的问题吗？（因为我是 jQuery 的新手，我正在谷歌上搜索如何更新版本，但如果有人遇到过任何此类问题，请告诉我，因为它会很有帮助）

编辑 2：
升级 jQuery 到1.9.1 没有帮助。问题仍然存在。

编辑 3： “事件”似乎是导致 FireFox 问题的原因。当我发出警报时alert('event: '+event)在 js 中，我能够在 IE 中正确看到警报，但在 FirerFox 中，没有出现此警报。因此，FireFox 似乎无法识别该事件。

编辑4：
刚刚在我朋友的建议下下载了firebug，它显示错误：

ReferenceError：未定义事件


任何指针？

编辑 5
Hi Friends，非常感谢所有的支持。问题不在于 jQuery，而在于使用我的代码的 UI 开发团队......不得不分析他们的 UI 以发现错误......真的感谢所有的支持......

4

2 回答 2

2

我不知道你是否已经修复了它，但我对 JSFiddle 做了一些更改，这是我的版本：http: //jsfiddle.net/vrnqA/3/

我删除了“事件”的使用，因为这似乎导致了你的问题。

这是修改后的 prepareList 函数：

$('#expList').find('li:has(ul)').click(function() {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
}).addClass('collapsed').children('ul').hide();

$('#expandList').click(function() {
    $('.collapsed').addClass('expanded').children().show('medium');
});
$('#collapseList').click(function() {
    $('.collapsed').removeClass('expanded').children().hide('medium');
});

它在 Firefox、Chrome 和 Safari（都在 Mac 上）对我来说运行良好。

于 2013-04-18T10:51:09.097 回答
0

真的感谢大家的支持。问题不在于 jQuery，而在于使用我的代码的 UI 开发团队......必须分析他们的 UI 以发现错误......查询搜索 li 有 ul。对标签形成有很大的依赖性（请参阅讨论评论中的小提琴以了解有关此 jQuery 中标签依赖性的更多信息）。分析了他们的代码并最终修复了它....感谢您的支持，很抱歉通知大家晚了，如果我无意中浪费了某人的时间，我深表遗憾。以后会更及时。

说明：
为了形成树，UI 开发人员不小心形成了这样的代码

<ul id="expList">
    <li>test</li>
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>    
</ul>

代替

<ul id="expList">
    <li>test
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
    </li>
</ul>

刚刚更正了这个！！看起来太天真了，但 HTML 代码实际上是通过许多 jsp 提供输入动态生成的，所以我花了一些时间才找到解决方案。
他们首先告诉我代码在 IE 中运行正常，但当我检查时却没有！然后他们告诉我他们的 IE 在兼容模式下运行。是的，在兼容模式下，IE避免了这些错误，但在普通模式下没有避免。修改后，它在所有浏览器中都能正常运行！

于 2013-04-19T14:13:16.803 回答