我可以重新列出容器中的现有元素吗?

我试图切换页面,使其从可见的溢出到隐藏的溢出。

javascript在我的脑海中,并且可以切换下拉菜单。为了使下拉菜单高度和页面高度匹配,我想知道是否可以切换现有的页面ID,以便在单击时隐藏页面溢出,因此,如果下拉高度与页面不完全匹配,至少可以掩盖溢出高度。

我必须切换下拉菜单的现有JavaScript如下:

<a id="mobile-nav" href="#">
    <div class="container1" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div> 
    </div>
    </div>
    </div>
</a> 

<script>
function myFunction(x){
    x.classList.toggle('change');
}
</script>

为此,我添加了:

<div class="page-id-28"> 
</div>

So that it was part of the same container-the logic being that when I toggled the dropdown, page height would reduce automatically too by reason of applying css overflow:hidden

最后,我的脚本如下所示:

<a id="mobile-nav" 
href="#"><div 
class="container1" 
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>. 
<div class="page-id-8122">. 
</div></div></div>
</a> 
<script>
function myFunction(x){
x.classList.toggl
e('change');}
</script>

用下面的css。

@media(max-width: 768px){.change  .page-id-8122{height: 80px; overflow: hidden !important;}}

没用

问题在于,使用page-id-8122定义的主体类已经存在,如下所示:

<body class="page-template- 
default page page-id-8122 
logged-in admin-bar no- 
customize-support wp- 
custom-logo cookies-set 
cookies-accepted has- 
sidebar-right">
<div id="page" 
class="site">

本质上,我正在创建具有相同名称的另一个元素。这可行吗?