Javascript 添加屏幕宽度功能以获得新效果

我需要添加/编辑屏幕宽度<769px的现有javascript函数

下面是显示/隐藏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 + "]";
         }
      }
   }
}

功能切换显示（id）{
var table=document.getElementById（id）；
如果（表）{
var children=table.getElementsByTagName（“TBODY”）；
var new_status='-'；
对于（变量i=0；i0&¤tClass.indexOf（“模块扩展”）>=0）{
跨度[i]。innerHTML=“[”+新_状态+”]；
}
}
}
}

我尝试应用屏幕宽度<769的反向逻辑

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

if（屏幕宽度<769）{
//默认情况下，对所有tbody显示“无”，然后在单击时展开以删除该样式
}

关于这方面的任何帮助，我对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);
           }
         }
      }
   }
}

功能设置\u双击\u事件（）{
var tables=document.getElementsByTagName（“表”）；
对于（变量i=0；i=0 | | thisClass.indexOf（“季后赛括号”）>=0））{
var captions=tables[i].getElementsByTagName（“CAPTION”）；
对于（var j=0；j

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

tbody

的默认样式如下所示：

tbody {
  display: none;
}

然后在分辨率>=769时：

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

---

我将结合使用媒体查询和javascript，如下所示：

• 默认情况下，显示所有

  tbody

  元素
• 默认情况下，隐藏所有

  切换按钮

• 当屏幕尺寸较窄时：
  • 隐藏所有

    t正文
    元素

  • 显示所有

    切换按钮

  • 当

    t车身

    具有特定等级时，显示该等级
• 切换按钮切换类

  t车身

  需要始终可见

（全屏调整大小以进行测试，按“全页”）

文档
.querySelector（“.toggle”）
.addEventListener（“单击”，函数（e）{
文件
.querySelector（“tbody”）
.classList.toggle（“已展开”）；
});
.toggle{
显示：无；
文本对齐：左对齐；
}
@介质（最大宽度：760像素）{
t车身{
显示：无；
}
tbody.is-expanded{
显示：表格行组；
}
.切换{
显示：表格单元格；
}
}

切换
我是一个桌上牢房
不清楚你在问什么。你能提供一个工作示例吗？我明天会测试，明天会测试，看看这个或JavaScript解决方案是否更好