使用纯Javascript仅在移动设备上显示点击列表的内容，并最初显示在桌面

Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

本文关键字：显示 列表 桌面 Javascript 移动      更新时间：2023-09-26

是否有办法使列表项最初仅在桌面上显示，当改变屏幕大小时，列表项动态更改为下拉式的东西，在那里你必须单击 clickable heading来显示它的内容?我想使用纯JS

    <h2 class="clickable-heading">Toggle This Dropdown</h2>
<ul>
    <li><a href="#">How To Do This</a>
    </li>
    <li><a href="#">Installing in The Mid 90s</a>
    </li>
</ul>
<h2 class="clickable-heading">Click This Dropdown 2</h2>

JS: 

function toggleDocs(event) {
if (event.target && event.target.className == 'clickable-heading') {
    var next = event.target.nextElementSibling;

    if (next.style.display == "none") {
        next.style.display = "block";
    } else {
        next.style.display = "none";
    }
  }
}
document.addEventListener('click', toggleDocs, true);

这是我的小提琴。

PS:我知道这是可能的CSS，使用复选框hack，但我想避免。

您可以使用window.innerWidth和window.innerHeight来获得窗口尺寸

然后根据这些维度显示/隐藏li元素，如果你隐藏它们，将点击事件绑定到可点击的h2，这是工作代码:

function toggleDocs() {
  var next = this.nextElementSibling;
  if (next.style.display == "none") {
    next.style.display = "block";
  } else {
    next.style.display = "none";
  }
}
function checkWindowDimensions() {
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;
  console.log(winWidth + " ::: " + winHeight);
  var ul = document.getElementsByTagName('ul')[0];
  
  if (winWidth < 300 || winHeight < 300) {
    
      ul.style.display = 'none';
    document.getElementsByClassName("clickable-heading")[0].addEventListener('click', toggleDocs, true);
  } else {
    document.getElementsByClassName("clickable-heading")[0].removeEventListener('click', toggleDocs, true);
    if (ul.nodeType == 1)
      ul.style.display = 'block';
  }
}
checkWindowDimensions();
window.onresize = function(event) {
   checkWindowDimensions();
};
ul {
  display: none;
}
<h2 class="clickable-heading">Toggle This Dropdown</h2>
<ul>
  <li><a href="#">How To Do This</a>
  </li>
  <li><a href="#">Installing in The Mid 90s</a>
  </li>
</ul>
<h2 class="clickable-heading">Click This Dropdown 2</h2>

这是更新小提琴。

相关文章：