Question

修改

自从最初发布这个问题以来，我已经走了几条试图解决问题的途径。它仍然没有解决，但现在我的问题是不同的。原始问题如下，然后我将在下面添加一个更新部分。

原始问题

我正在开发一个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');
  });
});

haml：

%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

有效。但是，我希望下拉的项目占据页面的整个宽度，如下所示：

http://i62.tinypic.com/2ci74uw.png

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

http://i58.tinypic.com/2ahb29e.png

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

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

当我更改浏览器大小时width: 300px正在更改为width: 1000px的位置。我不必永久或显着地更改浏览器大小。一旦这个宽度变为1000px，它第一次停留在那里 - 但是当我刷新页面并单击图标再次切换图表时，它又回到300px。我不知道如何挂钩这个div，因为它是由gem生成的，我不知道如何为它添加一个类。我已经尝试将样式添加到父元素，以确保所有父元素的子元素都是width: 100%，但这不起作用。

无论如何，我不认为在这里添加一个类是解决方案。我只是不知道是什么 - 我不是非常好的JavaScript。作为一个整体，我对所有前端工作都非常陌生。这里发生了什么，我怎样才能让这些图表在切换时始终是页面的整个宽度？

注意：我正在Chrome中对此进行测试。我在Firefox中进行了测试，它做了同样的事情。

好的，我开始怀疑这是否与我使用JavaScript函数捕获动态项ID的事实有关 - 页面可能包含任意数量的这些可切换图表，以及所以在每个id上调用jQuery函数似乎是不可能的，因为我不知道ID是什么。

然而，我删除了jQuery调用，问题仍然存在。

其中一个时候，我遇到的问题还在于解决Stack Overflow问题。所以我想我会提交并希望得到外界的帮助。：/

调整后的问题

Charthick的Github问题中的{p> This问题让我走上了另一条道路。解决方案不一定是试图重新设计图表。相反，我正在尝试触发调整大小事件，因为图表会在调整浏览器窗口大小时自动重新生成。这就是导致问题的原因以及解决方案所处的位置。

我的代码：

.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'));
  });

但它似乎根本没有做任何事情。

所以我想知道的是，当下拉列表resize结束时，如何让这个.panel-body事件生效，以便图表可以自行调整大小。

这是当前问题的屏幕演示，如果我没有足够清楚地描述它：

https://youtu.be/5quMGABoDs8

Answer 1

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

因此，如果您尝试再次给予父元素width: 100%的所有子元素的技术，您可能希望实现如下：

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

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

使用javascript切换元素会使元素显得太小，直到我调整浏览器大小

1 个答案: