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

有没有办法让列表项最初仅在桌面上显示，当更改屏幕大小时，列表项会动态更改为下拉列表，您必须单击

可单击标题

，以显示其内容？我想使用纯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>

这是我的

---

PS：我知道使用

CSS

，使用复选框hack是可能的，但我想避免这种情况

您可以使用

window.innerWidth

和

window.innerHeight

获取窗口尺寸

然后根据这些尺寸显示/隐藏

li

元素，如果隐藏它们，则将单击事件绑定到可单击的

h2

，这是工作代码：

function-toggleDocs（）{
var next=this.nextElementSibling；
如果（next.style.display==“无”）{
next.style.display=“block”；
}否则{
next.style.display=“无”；
}
}
函数checkWindowDimensions（）{
var winWidth=window.innerWidth；
var winHeight=window.innerHeight；
log（winWidth+：“+winHeight）；
var ul=document.getElementsByTagName（'ul'）[0]；
如果（winWidth<300 | | winHeight<300）{
ul.style.display=‘无’；
document.getElementsByClassName（“可单击标题”）[0]。addEventListener（“单击”，切换文档，true）；
}否则{
document.getElementsByClassName（“可单击标题”）[0]。removeEventListener（'click'，toggleDocs，true）；
如果（ul.nodeType==1）
ul.style.display='block'；
}
}
检查窗口尺寸（）；
window.onresize=函数（事件）{
检查窗口尺寸（）；
};
ul{
显示：无；
}
切换此下拉列表






单击此下拉列表2
您可能可以使用css媒体查询根据屏幕大小更改列表项的显示。是的，但我希望有一个可单击的标题。如果不使用复选框hack，我无法使用CSS实现这一点。我想避免这种情况。修改类名，而不是样式属性。然后在CSS中使用媒体查询。谢谢，但当更改屏幕大小并单击标题时，我无法使其正常工作？请确保屏幕宽度低于300px，如示例所示。对不起，我的错，我错过了一点思考，我编辑了代码，您必须直接将clck与给定的h2元素绑定，而不是与文档绑定。@Siyah是的，如果列表未隐藏，则无法单击，但如果列表（宽度或高度低于300 px），则可以单击，我不知道为什么从第二次单击起它就起作用。我已隐藏了ul，但当宽度或高度低于300px时，无法单击标题。单击时它什么也不做。在Firefox/JSFIDLE/CodePen和所有软件中测试。
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);