【发布时间】：2015-03-26 23:36:00
【问题描述】：
编辑
自从最初发布这个问题以来，我已经走了几条路来试图解决这个问题。它仍然没有解决，但现在我的问题不同了。原始问题在下面，然后我将在下面添加一个带有更新的部分。
原始问题
我正在开发一个 Rails 4 应用程序，但在使用 JavaScript 和 Chartkick gem 时遇到了一些问题。
我有两个 JavaScript 函数，这样用户可以单击一个图标，一个元素将下拉到图标下方/出现在页面上，并且图标将从右向箭头切换为向下指向箭。代码是这样的：
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
$(function() {
$('.toggle-icon').click(function() {
$(this).find('i').toggleClass('fa-arrow-circle-o-right fa-arrow-circle-o-down');
});
});
还有哈姆：
%a{href: "javascript:ReverseDisplay('toggle-stats#{item.id}')", class: 'toggle-icon'}
%i.fa.fa-arrow-circle-o-right
%div{id: "toggle-stats#{item.id}", style: "display: none;"}
= the items to be displayed
它有效。但是，我希望下拉的项目占据页面的整个宽度，如下所示：
但是，当我第一次单击切换图标时，它们显示为压扁的，如下所示：
如果我稍微调整浏览器的大小，图表就会弹出到全角，无论我从那里做什么，它都会保持这种状态。我不知道如何获取生成的标记，因为这个图表来自 Chartkick，作为一个宝石。浏览器中生成的html有这样一行：
<div dir="ltr" style="position: relative; width: 300px; height: 300px;">
当我更改浏览器大小时，width: 300px 将更改为 width: 1000px。我不必永久或显着更改浏览器大小。一旦该宽度在第一次停留在那里时更改为 1000 像素，但在我刷新页面并单击图标再次切换图表的那一刻，它又回到了 300 像素。我不知道如何挂钩到这个 div，因为它是由 gem 生成的，我不知道如何向它添加一个类。我尝试向父元素添加样式，以确保所有父元素的子元素都是width: 100%，但这没有任何作用。
无论如何，我不认为向它添加一个类是这里的解决方案。我只是不知道是什么——我的 JavaScript 不太好。作为一个整体，我对所有前端工作几乎是全新的。这是怎么回事，我怎样才能让这些图表在切换时始终是页面的全宽？
注意：我正在 Chrome 中对此进行测试。我在 Firefox 中进行了测试，它做同样的事情。
好的，我开始怀疑这是否与我使用 JavaScript 函数来捕获动态项目 ID 的事实有关 - 一个页面可能有任意数量的这些可切换图表，并且所以在每个 id 上调用一个 jQuery 函数似乎是不可能的，因为我不知道 ID 是什么。
但是，我删除了 jQuery 调用，但问题仍然存在。
在堆栈溢出问题框还没有回答我的问题时，其中一次是橡皮擦。所以我想我会在这里提交并希望得到外界的帮助。 ：/
调整后的问题
This Chartkick 的 Github 问题中的问题让我走上了一条不同的道路。解决方案不一定是尝试重新设计图表的样式。相反，我想做的是触发调整大小事件，因为当浏览器窗口调整大小时，图表会自动重新生成。这既是造成问题的原因，也是解决方案的所在。
我的代码：
.row
.col-sm-12
%h3.title-block.second-child
Stats by Video
.panel-groupd#faqList
- @claim.presenter.videos.each_with_index do |video, index|
.panel.panel-default
.panel-heading
%h4.panel-title
%a.chart{data: { toggle: "collapse", parent: "#faqList" }, href: "#video#{index}" }
= "'#{video.title}' at #{video.event.display_name} on #{display_date(video.recorded_at)}"
%div.panel-collapse.collapse{id: "#video#{index}"}
.panel-body
- if video.impressions.count > 0
%h4
Impressions by Hours (24 hours)
= line_chart video.impressions.group_by_day(:created_at, range: 1.day.ago...Time.now).count
...a couple more charts
:javascript
$(".chart").click(function() {
window.dispatchEvent(new Event('resize'));
});
所以这里的目的是，当我单击.panel-heading 时，这会下拉包含图表的.panel-body 并调整窗口大小，从而使图表正确调整大小（或者，应该）。
有点用，因为当我第一次点击.panel-heading 触发器时，它不会调整图表的大小，但是当我再次点击它时，图表的大小会完美调整以进行拆分第二……就在它们再次被隐藏之前。 :(
我尝试在 javascript 中添加超时，如下所示：
:javascript
$(".chart").click(function() {
setTimeout(1000);
window.dispatchEvent(new Event('resize'));
});
但它似乎根本没有做任何事情。
所以我在这里想知道的是，一旦下拉列表 .panel-body 出来，如何让这个 resize 事件起作用，以便图表会自行调整大小。
这是当前问题的屏幕截图，以防我描述得不够清楚：
【问题讨论】：
标签： javascript jquery css ruby-on-rails chartkick