为什么不显示父级也显示子项？

Question

我正试图创建一个带有select字段的display:block/noe系统的表单，但我有一个奇怪的行为：

当我显示一个以前没有显示的div块时，这个div的子级不接受显示块，而是保持没有显示。我已经尝试过可见性选项，但行为相同。

我该如何更正？这是正常行为吗？

非常感谢！

<div class="row row-no-gutter-x mt-2">
<div class="col-lg-6 col-sm-12 form-floating pe-lg-1">
<select class="form-select" name="even_type" required>
@foreach($even_types as $type)
@if ($type->id == 1)                                        
<option value="{{ $type->id }}" selected>{{ $type->nom }}</option>
@endif
@endforeach
</select>    
<label for="even_type">Type d'évenement <span class="text-danger-main">*</span></label>
</div>
<div class="col-lg-6 col-sm-12 form-floating ps-lg-1 mt-2 mt-lg-0">
<select class="form-select" name="ville" onchange="changeMdn(this.value)" required>                                     
<option value="angers" selected>Angers</option>
<option value="boulogne">Boulogne-Billancourt</option>
<option value="defense">La Défense</option>
<option value="lorient">Lorient</option>
<option value="nantes">Nantes</option>
<option value="rouen">Rouen</option>
</select>    
<label for="ville">Type d'évenement <span class="text-danger-main">*</span></label>
</div>
</div>
<div id="mdnSpaces">
<div id="angersSpaces" style="display: block;">
angers
<div class="form-floating mt-2">
<select class="form-select" name="ville" onchange="changeAngersMdn(this.value)" required>                                     
<option value="ralliment" selected>Place du Ralliement</option>
<option value="lenepveu">Rue Lenepveu</option>
<option value="pilori">Place du Pilori</option>
</select>    
<label for="ville">Type d'évenement <span class="text-danger-main">*</span></label>
</div>
<div id="angersEmplacement">
<div id="angersSpacesralliment">
{{ Form::open(['route' => 'mdn.angers.ralliement.create']) }}
ralliment
{{ Form::close() }}
</div>
<div id="angersSpaceslenepveu" style="display: none;">
{{ Form::open(['route' => 'mdn.angers.lenepveu.create']) }}
lenepveu
{{ Form::close() }}
</div>
<div id="angersSpacespilori" style="display: none;">
{{ Form::open(['route' => 'mdn.angers.pilori.create']) }}
pilori
{{ Form::close() }}
</div>
</div>
</div>
<div id="boulogneSpaces" style="display: none;">
{{ Form::open(['route' => 'mdn.boulogne.create', 'id' => 'boulogneMdnForm']) }}
boulogne
{{ Form::close() }}
</div>
<div id="defenseSpaces" style="display: none;">
{{ Form::open(['route' => 'mdn.defense.event.create', 'id' => 'defenseMdnForm']) }}
defense
{{ Form::close() }}
</div>
<div id="lorientSpaces" style="display: none;">
{{ Form::open(['route' => 'mdn.lorient.create', 'id' => 'lorientMdnForm']) }}
lorient
{{ Form::close() }}
</div>
<div id="nantesSpaces" style="display: none;">
{{ Form::open(['route' => 'mdn.nantes.event.create', 'id' => 'nantesMdnForm']) }}
nantes
{{ Form::close() }}
</div>
<div id="rouenSpaces" style="display: none;">
{{ Form::open(['route' => 'mdn.rouen.event.create', 'id' => 'rouenMdnForm']) }}
rouen
{{ Form::close() }}
</div>
</div>
function changeAngersMdn(emplacement){
const angersEmplacement = document.getElementById('angersEmplacement').getElementsByTagName("div");
for(var empl of angersEmplacement){
if(empl.id == 'angersSpaces'+emplacement){
empl.style.display = "block";  
}else{
empl.style.display = "none"; 
}
}
}
function changeMdn(ville){
const mdns = document.getElementById('mdnSpaces').getElementsByTagName("div");
for(var mdn of mdns){
if(mdn.id == ville+'Spaces'){
mdn.style.display = "block";       
}else{
mdn.style.display = "none"; 
}
}
}

Answer 1

如果子级位于其父级正下方的DOM树中，则不需要显式display:none，只需隐藏并切换父级即可。

let parents = document.getElementsByClassName('parent');
for(let parent of parents){
parent.onclick = (ev) => {
if (ev.target.style.display === "none") {
ev.target.style.display = "block";
} else {
ev.target.style.display = "none";
}
}
}
let show = document.getElementById('show');
show.onclick = () => {
for(let parent of parents){
parent.style.display = "block";
}
};

.parent {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.child {
background-color: blue;
width: 20px;
height: 20px;
}
#show {
width: 100px;
background-color: green;
cursor: pointer;
}

<div class='parent'>
click me to hide
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='parent'>
click me to hide
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='parent'>
click me to hide
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div id='show'>show all</div>

Answer 2

我发现了问题所在：我选择了parent内部的所有div，这意味着它选择了所有div，无论div的子级是什么。只需更改.getElementByClassName并使用一个类来选择我想要的onlydiv。