由于显示为null，模态打开为空

Question

（我知道，标题不好，原谅我）

所以这就是事情：

我有navbar有3个图标，每个图标都打开相同的modal，但内部资源不同。

只有在存在资源的情况下才可以点击它们，否则它们会变灰。因此，0,1,2或全部3个可以看到或变灰。

当所有3个都可点击时，它工作正常，但如果1或2灰显，另一个打开一个空模式，控制台显示assistance.js:29 Uncaught TypeError: Cannot read property 'style' of null。

这是twig看起来如何以及如何填充模态以及模态本身：

<div class="assistance-body">
    <nav>
        <ul class="nav nav-tabs nav-justified nav-no-padding-top">
          {% set allResources = ['videos', 'glossary', 'links'] %}
          {% for key in allResources %}
              {% if key in resources|keys %}
                <li{% if loop.first %} ng-class="active" {% verbatim %}{{class}}{% endverbatim %} {% endif %} class="icon-resource">
                    <a
                      data-toggle=""
                      href="#assistance-{{ key }}"
                      segment-event="Modules: Tutor: Clicked {{ key|capitalize }} Section"
                      segment-not-track-if-class="active"
                      onclick="toggleAssistance('assistance-{{ key }}', ['assistance-videos', 'assistance-glossary', 'assistance-links'] )"
                    >
                        <i class="icon-{{ key }} icon-sm"></i>
                        <span class="sr-only">{{ ('resources.tabs.' ~ key ~ '.title') | trans }}</span>
                    </a>
                </li>
                {% else %}
                    <li{% if loop.first %} {% verbatim %}{{class}}{% endverbatim %} {% endif %} class="icon-resource">
                        <i class="icon-{{ key }} icon-sm icon-sm-gray"></i>
                        <span class="sr-only">{{ ('resources.tabs.' ~ key ~ '.title') | trans }}</span>
                    </li>
              {% endif %}
          {% endfor %}
        </ul>
    </nav>

    <div id="assistance" class="assistance">
      <div>
          {% for key, data in resources %}
              <div id="assistance-{{ key }}">
                  <button
                    type="button"
                    class="close"
                    onclick="toggleAssistance('assistance-{{ key }}', ['assistance-videos', 'assistance-glossary', 'assistance-links'] )"
                    aria-hidden="true">
                  &times;
                  </button>
                  {% include data.view with { 'category': data.category, 'resources': data.resources } %}
              </div>
          {% endfor %}
      </div>

    </div>

</div>

这是assistance.js：

function toggleAssistance (target, all) {
  var targetAssistanceResource = document.getElementById(target);
  var allAssistanceResources = [];

  all.forEach(function (el) {
    allAssistanceResources.push(document.getElementById(el));
  });

  // the resource is already opened, let's close it
  if (getStyle(targetAssistanceResource, 'display') !== 'none') {
    // hiding the main assistance div
    document.getElementById('assistance').style.display = 'none';

    // hiding all assistance resources
    allAssistanceResources.forEach(function (res) {
      res.style.display = 'none';
    });
  } else { // it's not opened, let's open it
    // showing the main assistance div
    document.getElementById('assistance').style.display = 'block';

    // hiding all assistance resources
    allAssistanceResources.forEach(function (res) {
      res.style.display = 'none';
    });

    // showing the target assistance resource
    targetAssistanceResource.style.display = 'block';
  }
}

function getStyle (el, cssprop) {
  if (el.currentStyle) { // IE
    return el.currentStyle[cssprop];
  } else if (window.getComputedStyle) {
    return window.getComputedStyle(el)[cssprop];
  }
  // finally try and get inline style
  return el.style[cssprop];
}