jQuery与可折叠列表冲突

Question

我当前正在使用一个小的jQuery脚本（包含infra ）来使列表具有collapsible-list /可折叠/可扩展类。 默认情况下，脚本会折叠列表（还有一些CSS，也包含在下文中 ，使访问者容易注意到此列表），然后在访问者单击可扩展元素时将其扩展。

以下是脚本：

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（可能还有页面上的其他脚本，我似乎无法隔离）。

该脚本的确折叠了给定collapsible-list类的所有列表的顶层部分以外的所有部分，但这是适当功能结束的地方。 现在，该脚本在我的测试环境（以及JSFiddle ）中的行为符合预期； 但是，一旦在我的网站中实施了脚本，列表就会折叠，并一键展开， 但是 ，而不是在被点击后（如应有的那样）保持展开状态，而是立即再次折叠。 显然，一旦实现，这会使脚本无用，因为collapsible-list类在其上调用过的任何列表对于访问者来说都是无法使用的。

这是当前实施页面的链接： http : //wpmudev.docs.omnifora.com/docs/plugins/wpmu-dev-dashboard/ 。 现在，我确定某个地方存在脚本冲突，但是我似乎无法弄清楚哪个脚本存在冲突。

附加信息

该站点使用Bootstrap，我怀疑这可能是冲突的根源。

更新我已经缩小了潜在冲突的范围，而且看来Bootstrap可能不是罪魁祸首。 这是一个JSFiddle，其列表在两个不同的Bootstrap面板设置（嵌套在panel-body ，嵌套在panel内）内表现出预期的效果： 在此处输入链接描述 。

我现在设法使列表正常工作， 但不涉及格式化。 jQuery冲突似乎是由一个脚本调用另一个脚本的方式引起的轻微错误导致的，这导致collapsible-list.js文件被加载两次。 这是一个有效的JSFiddle： 在此处输入链接描述

Answer 1

添加.toggleClass('collapsible-list-collapsed');可能会起作用.toggleClass('collapsible-list-collapsed'); 在您的点击功能中。

Answer 2

经过几个小时的摆弄，我能够解决冲突：

1. 其中一个脚本引用的格式不正确，这导致对collapsible-list.js两次调用，这导致了意外的立即收缩扩展行为。

2. 最初的脚本只是使用expanded和collapsed作为类，它与另一组规则交互并导致意外的行为。 修改后的脚本使用更特定的类，避免了此类冲突。

然后修改CSS：

1. 有人认为放置padding: 0;是明智的padding: 0; 在主题的主要CSS文件中的ul和li元素上； 显然，这很容易被.collapsible-list的更具体规则所覆盖。

结果是该页面现在可以按预期运行： http : //wpmudev.docs.omnifora.com/docs/plugins/wpmu-dev-dashboard/ 。