Question

我需要添加/编辑这个现有的javascript函数用于屏幕宽度＆lt; 769px

这是显示/隐藏tbody的当前函数。默认情况下，此页面上的表格都会显示，当您单击标题上的+或 - 符号时，会折叠并展开。

function toggle_display (id) {
   var table = document.getElementById(id);
   if (table) {
      var children = table.getElementsByTagName("TBODY");
      var new_status = '-';
      for (var i = 0; i < children.length; i++) {
         var display = children[i].style.display ? '' : 'none';
         if (display == 'none') {
            new_status = '+';
         }
         children[i].style.display = display;
         var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=DISPLAY&VALUE=" + id + ":" + display;
         makeHttpRequest(url);
      }
      // change the innerHTML to [-] or [+] accordingly...
      var spans = table.getElementsByTagName("SPAN");
      for (var i = 0; i < spans.length; i++) {
         var currentClass = spans[i].getAttribute("className");
         if (currentClass == null || currentClass.length == 0) {
            currentClass = spans[i].getAttribute("class");
         }
         if (currentClass != null && currentClass.length > 0 && currentClass.indexOf("module_expand") >= 0) {
            spans[i].innerHTML = "[" + new_status + "]";
         }
      }
   }
}

我正在尝试将反向逻辑应用于屏幕宽度＆lt; 769

   if (screen.width < 769) {
      // have display:none to all tbody by default and then expand to remove that style when clicked
   }

对此有任何帮助，我不能流利使用javascript，只是一个寻求帮助以便快速更改的新手

以下是字幕中+ / - 符号的点击事件功能，但我认为这不需要任何编辑，但发布以供参考

function set_up_double_click_events () {
   var tables = document.getElementsByTagName("TABLE");
   for (var i = 0; i < tables.length; i++) {
      var thisClass = tables[i].getAttribute("className");
      var thisId = tables[i].getAttribute("id");
      if (! thisClass || thisClass.length == 0) {
         thisClass = tables[i].getAttribute("class");
      }
      if (thisClass && (thisClass.indexOf("report") >= 0 || thisClass.indexOf("playoffbracket") >= 0)) {
         var captions = tables[i].getElementsByTagName("CAPTION");
         for (var j = 0; j < captions.length; j++) {
            if (typeof moduleExpand == "undefined" || moduleExpand == 'Doubleclick') {
               captions[j].ondblclick=function() {
                  toggle_display(this.parentNode.getAttribute("id"));
               }
            } else if (typeof moduleExpand != "undefined" && moduleExpand == 'PlusMinus') {
               // add the + sign here...
               var span = document.createElement("span");
               span.setAttribute("className", "module_expand");
               span.setAttribute("class", "module_expand");
               span.setAttribute("style", "visibility: visible;");
               span.setAttribute("href", "javascript:void(0);");
               span.onclick=function() {
                  toggle_display(this.parentNode.parentNode.getAttribute('id'));
               }
               span.innerHTML = "[-]";
               captions[j].insertBefore(span, captions[j].firstChild);
               // alert("innerHTML: " + captions[j].innerHTML);
           }
         }
      }
   }
}

Answer 1

我使用媒体查询和javascript这样的组合：

默认情况下，显示所有tbody元素
默认情况下，隐藏所有toggle按钮
屏幕尺寸较窄时：
- 隐藏所有tbody元素
- 显示所有toggle按钮
- 当tbody有某个课程时，请显示
切换按钮切换班级tbody需要始终可见

（全屏调整大小以进行测试，按＆＃34;整页＆＃34;）

＆＃13;

document
  .querySelector(".toggle")
  .addEventListener("click", function(e) {
    document
      .querySelector("tbody")
      .classList.toggle("is-expanded");
});

＆＃13;

.toggle {
  display: none;
  text-align: left;
}
@media (max-width: 760px) {
  tbody {
    display: none;
  }
  tbody.is-expanded {
    display: table-row-group;
  }
  .toggle {
    display: table-cell;
  }
}

＆＃13;

<table>
  <thead>
    <tr>
      <th class="toggle">toggle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I'm a table cell</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

使用CSS和媒体查询可能会更容易。

tbody的默认样式可能如下所示：

tbody {
  display: none;
}

然后在分辨率＆gt; = 769：

@media (min-width: 769px) {
  tbody {
    display: block;
  }
}

为新效果添加屏幕宽度功能

2 个答案: