Javascript jQuery与可折叠列表冲突

我目前正在使用一个小的jQuery脚本，包括infra，用类

可折叠列表

可折叠/可扩展创建列表。默认情况下，脚本会折叠列表（还有一点CSS，也包括infra，使访问者容易注意到），然后在访问者单击可扩展元素时将其展开

以下是脚本：

jQuery

jQuery(function($) {
function prepareList() {
    $('.collapsible-list').find('li:has(ul)')
        .click( function(event) {
            if (this == event.target) {
                $(this).toggleClass('collapsible-list-expanded');
                $(this).children('ul').toggle('medium');
            }
            return false;
        })
        .addClass('collapsible-list-collapsed')
        .children('ul').hide();
};

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

CSS

/* Collapsible Lists */
.collapsible-list, .collapsible-list ul, .collapsible-list li {
    list-style: none;
}
.collapsible-list .collapsible-list-collapsed:before {
    content: "+ ";
    font-weight: bold;
    color: #00AA00;
}
.collapsible-list .collapsible-list-expanded:before {
    content: "- ";
    font-weight: bold;
    color: #AA0000;
}

CSS是为了完整性而包含的，它的功能完全符合预期。问题在于jQuery（可能还有页面上的其他脚本，我似乎无法将其隔离）

脚本确实折叠了所有列表的顶级部分，但给定了

可折叠列表

类，但适当的功能就到此结束了。现在，脚本在我的测试环境中（以及在中）的行为与预期的一样；但是，一旦脚本在我的站点中实现，列表就会折叠，展开一次单击，但是，而不是在被单击后保持展开状态（正如它们应该的那样），它们会立即再次折叠。很明显，一旦实现，脚本就变得无用，因为

可折叠列表

类调用它的任何列表都会使访问者无法使用

以下是指向当前实现该功能的页面的链接：。现在，我肯定在某个地方存在脚本冲突，但我似乎无法找出哪个脚本是冲突的

其他信息

该网站使用引导，我怀疑这可能是冲突的根源

更新 我已经缩小了潜在冲突的范围，看来Bootstrap可能不是罪魁祸首。下面是一个JSFIDLE，该列表在两个不同的引导面板设置（嵌套在

面板主体

中，嵌套在

面板

中）中按预期运行：

---

我现在已经设法让列表工作，除了格式化。jQuery冲突似乎是由一个脚本调用另一个脚本的方式中的一个轻微错误引起的，这导致了两次加载

可折叠列表.js

文件。这里有一个正在工作的JSFIDLE:

添加一个

.toggleClass（'collapsable-list-collapsed'）可能会起作用。
可以添加一个
.toggleClass（'collapsable-list-collapsed'）在您的单击功能中。
在摆弄了几个小时之后，我能够解决冲突：

其中一个脚本引用的格式不正确，这导致对
可折叠列表.js
的两次调用，这导致了意外的扩展后立即收缩行为

原始脚本只使用
扩展的
和
折叠的
作为类，这些类与另一组规则交互并导致意外行为；修改后的脚本使用了更具体的类，从而避免了此类冲突

然后修改CSS：

有人认为把
padding:0到主题的主CSS文件中的
ul
和
li
元素上；显然，对于
可折叠列表
，这一点很容易被更具体的规则覆盖

结果是该页面现在按预期运行：
 在摆弄了几个小时之后，我终于解决了冲突：

其中一个脚本引用的格式不正确，这导致对
可折叠列表.js
的两次调用，这导致了意外的扩展后立即收缩行为

原始脚本只使用
扩展的
和
折叠的
作为类，这些类与另一组规则交互并导致意外行为；修改后的脚本使用了更具体的类，从而避免了此类冲突

然后修改CSS：

有人认为把
padding:0到主题的主CSS文件中的
ul
和
li
元素上；显然，对于
可折叠列表
，这一点很容易被更具体的规则覆盖

结果是该页面现在按预期运行：
 谢谢你的建议，在处理了几个小时后，我能够解决所有的冲突，并将其归结为一个简单的CSS遗留问题。感谢你的建议，在处理了几个小时后，我能够解决所有的冲突，并将其归结为一个CSS遗留问题，这很容易修复。