1

编辑

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

原始问题

我正在开发 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 调用，但问题仍然存在。

在堆栈溢出问题框还没有回答我的问题时，其中一次是橡皮擦。所以我想我会在这里提交并希望得到外界的帮助。：/

调整问题

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

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

所以我在这里想知道的是，resize一旦下拉列表出来，如何让这个事件起作用.panel-body，以便图表能够自行调整大小。

这是当前问题的屏幕截图，以防我描述得不够清楚：

https://youtu.be/5quMGABoDs8

4

1 回答 1

1

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

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

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

（第一行进入你的 CSS 文件，第二行进入 JS）

于 2015-03-31T14:24:43.330 回答