我在使用js将元素-.abc1de2-的“显示”属性从“无”更改为“弹性”时遇到问题，反之亦然。我试图创建一个下拉菜单，该菜单我之前已经做过很多次。但是，该错误源于正在计算的.abc1de2 div的样式。
我进行了搜索，但似乎找不到正在计算的 。最后，我很确定这不是原因，因为它不是.abc1 div的父级。我将对一些帮助您找到确切创建计算样式的帮助，以及一些有关如何避免此问题的建议-即。无法覆盖“只读”属性。
谢谢！
完整代码：
<!DOCTYPE = HTML>
<html>
<head>
<title>FooterLayoutV1</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
/*Override body margins and global fonts*/
*{
font-family: arial;
}
body{
margin:0;
}
/*Style FOOTER*/
.a{
display:flex;
background-color: rgba(29,29,184,1);
width: 100%;
}
.ab{
display: flex;
flex-direction: column;
width: 100%;
margin:25px;
background-color: rgba(29,29,184,1);
}
.abc1{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
width:100%;
background-color: rgba(29,29,184,1);
}
.abc1 div a{
display: flex;
flex-direction: column;
margin: 3px;
margin-bottom: 10px;
background-color: rgba(29,29,184,1);
}
.abc1 * p{
color: white;
font-size: 20px;
margin-bottom: 5px;
}
.abc1 * a{
margin-top: 3px;
font-size: 13px;
text-decoration: none;
color:black;
}
.abc1 * a:hover{
cursor: pointer;
color: white;
}
.abc2{
display: flex;
position: relative;
width: 100%;
height: 10px;
border-top: 1px solid white;
background-color: rgba(29,29,184,1);
}
.abc3{
display: flex;
flex-direction: row;
position: relative;
background-color: rgba(29,29,184,1);
}
.abc3d1{
display: flex;
justify-content: flex-start;
align-items: center;
width:60%;
margin: 2px;
}
.abc3d2{
display:flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 40%;
margin:2px;
background-color: rgba(29,29,184,1);
}
.abc3d2 a{
height: 25px;
width: 25px;
margin: 4px;
background-position:center;
background-size: cover;
background-color: rgba(255,255,255,.5);
border: 1px solid rgba(255,255,255,.5);
border-radius: 2px;
}
.abc3d2 a:hover{
background-color: rgba(255,255,255,.9);
}
.abc4{
display:flex;
flex-direction: row;
position: relative;
justify-content: flex-end;
align-items: center;
margin-right: 10px;
}
.abc4 a{
margin: 2px;
background-color: rgba(29,29,184,1);
text-decoration: none;
font-size: 10px;
color: black;
}
.abc4 a:hover{
color: white;
}
.vl{
height: 12px;
border-left: 1px solid white;
margin-right: 3px;
margin-left: 3px;
background-color: white;
}
/*RESPONSIVENESS!*/
@media screen and (min-width:751px){
.abc1de1f2{
display: none;
}
}
@media screen and (max-width:750px){
.abc1{/*Menu Parent*/
display:flex;
flex-direction: column;
justify-content: center;
}
.abc1d{/*Menu(s)*/
display:flex;
flex-direction: column;
}
.abc1 div a{
align-self: center;
justify-content: center;
align-items: center;
}
.abc3{
flex-direction: column;
justify-content: center;
align-items: center;
border:1px solid black;
}
.abc3d1, .abc3d2,.abc3d1e1,.abc4{
display: flex;
justify-content: center;
align-items: center;
border:1px solid green;
}
.abc1de1{
display:flex;
width: 100%;
flex-direction: row !important;
justify-content: space-between;
align-items: flex-end;
border-bottom: : 2px solid white;
}
.abc1de2{
display:none;
border: 1px solid black;
}
.abc1de1f2{
width:25px;
height: 25px;
cursor: pointer;
border: 1px solid black;
}
}
</style>
</head>
</body>
{% block Body %}
{% endblock %}
<!--FOOTER-->
<div class="a" id="base_container">
<div class="ab" id="sizing_base_container">
<div class="abc1" id="menu_container_parent">
<div class="abc1d" id="menu_container_1">
<div class="abc1de1">
<p class=abc1de1f1> Menu 1 </p>
<button class="abc1de1f2" id="menu_button_1"></button>
</div>
<div class="abc1de2" id="menu_content_1">
<a class="abc1de3" href="#">Garbage 1</a>
<a class="abc1de3" href="#">Garbage 2</a>
<a class="abc1de3" href="#">Garbage 3</a>
<a class="abc1de3" href="#">Garbage 4</a>
</div>
</div>
<div class="abc1d" id="menu_container_2">
<div class="abc1de1">
<p class=abc1de1f1> Menu 2 </p>
<button class="abc1de1f2" id="menu_button_2"></button>
</div>
<div class="abc1de2" id="menu_content_2">
<a class="abc1de3" href="#">Garbage 1</a>
<a class="abc1de3" href="#">Garbage 2</a>
<a class="abc1de3" href="#">Garbage 3</a>
<a class="abc1de3" href="#">Garbage 4</a>
</div>
</div>
<div class="abc1d" id="menu_container_3">
<div class="abc1de1">
<p class=abc1de1f1> Menu 3 </p>
<button class="abc1de1f2" id="menu_button_3"></button>
</div>
<div class="abc1de2" id="menu_content_3">
<a class="abc1de3" href="#">Garbage 1</a>
<a class="abc1de3" href="#">Garbage 2</a>
<a class="abc1de3" href="#">Garbage 3</a>
<a class="abc1de3" href="#">Garbage 4</a>
</div>
</div>
</div>
<!--{% for item in footer_menu %}
<div class="abc1d" id="menu_container_{{ loop.index }}">
<div class="abc1de1">
<p class=abc1de1f1> {{item[0]}} </p>
<button class="abc1de1f2" id="menu_button_{{ loop.index }}"</button>
</div>
<div class="abc1de2" id="menu_content_{{ loop.index }}">
{% for n in range(1,item|length) %}
<a class="abc1de3" href="{{item[n][1]}}">{{item[n][0]}}</a>
{% endfor %}
</div>
</div>
<script>
$(document).ready(function(){
var i;
var button = document.getElementsByClassName('abc1de1f2');
var content = document.getElementsByClassName('abc1de2');
for(i=0;i<button.length;i++){
button[i].addEventListener("click",function(){
this.classList.toggle("active");
if (content.style.display="none"){
content.style.display="flex";
}else{
content.style.display="none";
}
});
}
});
</script>
</body>
</html>