jquery - 外部容器未使用扩展脚本扩展

Question

所以我有一些基于悬停和点击展开和折叠的功能。该功能在基本测试中运行良好，但在网站上不起作用。当用户单击 Expand A 和 Expand B 时。外部容器随之展开，您可以在 jsFiddle 中对其进行测试。 .但是当相同的代码应用于 main site 时外部容器不会随扩展的 div 一起扩展。相反，如果它太长，它有扩展的 div。我在这里缺少什么？

提前致谢。霸王龙

附言我无法使用较新版本的 jQuery 或更改布局。这就是 CMS 的设置。但是我可以更改 css 属性和 javascript 函数。

jQuery 脚本在测试版本上运行良好:http://jsfiddle.net/rexonms/pXm62/

但它在网站上不起作用:http://boston.staging.ujcweb.org/expandable-box.aspx

Answer 1

在您的 http://boston.staging.ujcweb.org/js/globalPage.js 中有一个名为 adjustLayout 的函数动态设置 div#ctl00_ContentPlaceHolder1_supportingElements 高度的文件。因此你的箱子不能推容器。

你可以试试这个；更改 http://boston.staging.ujcweb.org/local_includes/top-nav.js 底部的切换功能脚本:

$("a.trigger").click(function() {
    var $this = $(this),
        $container = $('#ctl00_ContentPlaceHolder1_supportingElements');
    if($this.hasClass('active')) {
        $container.height($container.data('height'));
    }
    else {
        $container.data('height', $container.height()).css('height', 'auto');
    }
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});