在我调整浏览器大小之前，用javascript切换元素会使元素看起来太小

编辑

自从最初发布这个问题以来，我又走了两条路试图解决这个问题。问题还没有解决，但现在我的问题不同了。原始问题在下面，然后我将在下面添加一个部分，其中包含更新

原始问题

我正在开发一个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

它起作用了。但是，我希望下拉的项目占据整个页面的宽度，如下所示：

:javascript
  $(".chart").click(function() {
    setTimeout(1000);
    window.dispatchEvent(new Event('resize'));
  });

但是，当我第一次单击切换图标时，它们显示为挤压状，如下所示：

.importantRule { width: 100% !important; } 
$( "parentElement > childElement" ).addClass('importantRule');

如果我再稍微调整一下浏览器的大小，图形就会弹出到全宽，无论我从那里做什么，它都会保持这种状态。我不知道如何获得生成的标记，因为这个图表来自Chartkick，作为一个宝石。浏览器中生成的html有以下行：

<div dir="ltr" style="position: relative; width: 300px; height: 300px;">

因此，这里的意图是，当我单击

.panel标题

时，这两种方法都会将包含图表的

.panel主体

下拉，并调整窗口大小，从而使图表正确调整大小（或者应该调整大小）

它的工作原理是，当我第一次单击

.panel heading

触发器时，它不会调整图表的大小，但当我再次单击它时，图表的大小会在瞬间完全调整。。。就在它们再次被隐藏之前：(

我尝试在javascript中添加超时，如下所示：

:javascript
  $(".chart").click(function() {
    setTimeout(1000);
    window.dispatchEvent(new Event('resize'));
  });

但它似乎什么也没做

因此，我想知道的是，一旦弹出下拉菜单

.panel body

，如何使此

resize

事件正常工作，以便图表能够自行调整大小

以下是当前问题的屏幕演示，以防我没有足够清楚地描述它：

---

我对Ruby或Chartkick一无所知，但为了覆盖内联样式，您必须在css中使用

！important

因此，如果您尝试再次为父元素的所有子元素

width:100%

指定宽度的技术，您可能希望实现如下内容：

.importantRule { width: 100% !important; } 
$( "parentElement > childElement" ).addClass('importantRule');

---

（第一行在CSS文件中，第二行在JS中）

感谢您的输入-很抱歉，这么长时间才回复！但是，这不是正确的路径。：（我现在正在更新我的原始问题，因为我已经尝试了很多东西，并找到了正确的方向，但到目前为止还没有实现。