Question

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

提前致谢。雷克斯

P.S。我不能使用更新版本的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
});

Answer 2

我的小提琴上看不到任何东西。但是，在主站点上，容器ctl00_ContentPlaceHolder1_supportingElements在元素的样式标记中设置了height 676px（可以动态设置）。这就是问题所在。消除它或将其更改为min-height用于子元素扩展。

外部容器未随扩展脚本一起扩展

2 个答案: