Question

我目前正在使用一个小的jQuery脚本（包括 infra ）来创建类collapsible-list可折叠/可扩展的列表。默认情况下，脚本会折叠列表（还有一些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（可能是页面上的其他一些脚本，我似乎无法隔离）。

脚本除了给定collapsible-list类的任何列表的顶级部分之外的所有部分，但这是正确功能结束的地方。现在，脚本在我的测试环境中（以及JSFiddle）中的行为与预期一样;但是，一旦脚本在我的网站中实现，列表就会崩溃，只需点击一下，但，而不是在点击后保持扩展（正如他们应该的那样），它们会立即再次崩溃。很明显，这会使脚本在实现后变得无用，因为collapsible-list类调用它的任何列表都会对访问者无法使用。

以下是指向当前实施的网页的链接：http://wpmudev.docs.omnifora.com/docs/plugins/wpmu-dev-dashboard/。现在，我确定某处存在脚本冲突，但我似乎无法弄清楚哪些脚本存在冲突。

其他信息

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

更新我已经缩小了潜在的冲突，似乎Bootstrap可能不是罪魁祸首。这是一个JSFiddle，列表在两个不同的Bootstrap面板设置（嵌套在panel-body中并嵌套在panel中）中按预期运行：enter link description here。

我现在设法让列表工作除了格式化。 jQuery冲突似乎是由一个脚本调用另一个脚本的方式中的轻微错误引起的，这导致collapsible-list.js文件被加载两次。这是一个有效的JSFiddle：enter link description here

Answer 1

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

Answer 2

在摆弄几个小时后，我能够解决冲突：

其中一个脚本引用格式不正确，导致两次调用collapsible-list.js，这导致了意外的即时合同扩展行为。
原始脚本仅使用expanded和collapsed作为类，它与另一组规则交互并导致意外行为;修改后的脚本使用更具体的类，以避免此类冲突。

然后修改CSS：

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

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

jQuery与可折叠列表冲突

2 个答案: