将打开一个 div 关闭上一个

Question

我正在创建一个显示和隐藏 div 的菜单。 这部分代码正在工作。

 function Mudarestado(el) { var display = document.getElementById(el).style.display; if(display == "none") document.getElementById(el).style.display = 'block'; else document.getElementById(el).style.display = 'none'; }

 <div class="wrapper"> <div class="sidebar"> <h6 style="color: White">Registos</h6> <ul class="nav1"> <li><a type="button" class="button" onclick="Mudarestado('minhaDiv')">Requisição Manutenção</a></li> <li><a type="button" class="button" onclick="Mudarestado('minhaDiv1')">Pedidos de Informação</a></li> </ul> </div> <div class="content isOpen"> <div id="minhaDiv" style="display:none;" class="divCaixa center1"> <form class="form15" method="POST" style="max-width: 100%; width: auto; display: table;"> <div class="modal-header"> <button style="float:right" class="btn btn-primary view_data12" data-toggle="modal" data-target="#dataModal11">Pedidos Manutenção</button> </div> <div class="modal-header"> <h4 class="modal-title">REQUISIÇÃO DE MANUTENÇÃO</h4> </div> <ul class="flex-outer"> <li> <label for="Pedido">Requerente</label> <select class="form-control" id="Pedido" name="Pedido" required=""> <?php $sql = "SELECT * FROM raddb.Valencias WHERE Id IN ('3') ORDER BY Destino ASC"; $qr = mysqli_query($conn, $sql); while($ln = mysqli_fetch_assoc($qr)){ echo '<option value="'.$ln['Id'].'">'.$ln['Destino'].'</option>'; }?> </select> </li> <li> <label for="Assunto">Assunto</label> <input type="text" class="form-control" id="Assunto" name="Assunto"> </li> <li> <label for="Descricao">Descrição</label> <textarea rows="6" id="Descricao" placeholder="Digite o motivo da requisição"></textarea> </li> <li style="float: right"> <button type="button" class="btn btn-success" onclick="inserir_registo14()">Gravar</button> </li> </ul> </form> </div> <div id="minhaDiv1" style="display:none;" class="divCaixa center1"> <form class="form6" method="POST" style="max-width: 100%; width: auto; display: table;"> <div class="modal-header"> <h4 class="modal-title">Pedidos de Informação Infância</h4> </div> <ul class="flex-outer"> <li> <label for="DataRegisto2">Data do Contacto</label> <input type="date" class="form-control" id="DataRegisto1" name="DataRegisto" value="<?php echo date("Ymd");?>"> </li> <li> <label for="Contacto">Responsável pelo Contacto</label> <input type="text" class="form-control" id="Contacto" name="Contacto"> </li> <li> <label for="Telefone">Telefone (rede móvel)</label> <input type="number" class="form-control" id="Telefone" name="Telefone"> </li> <li> <label for="NomeCrianca">Nome da Criança</label> <input type="text" class="form-control" id="NomeCrianca" name="NomeCrianca"> </li> <li> <label for="DataNasc">Data Nascimento</label> <input type="date" class="form-control" id="DataNasc" name="DataNasc" value="<?php echo date("Ymd");?>"> </li> <li> <label for="Visita">Visita</label> <ul class="flex-outer"> <div class="form-check"> <label class="toggle"> <input type="radio" name="Visita" id="Visita1" value="Sim"> <span class="label-text"> Sim</span> </label> </div> <div class="form-check"> <label class="toggle"> <input type="radio" name="Visita" id="Visita2" value="Não"> <span class="label-text">Não</span> </label> </div> </ul> </li> <li> <label for="DataVisita">Data da Visita</label> <input type="date" class="form-control" id="DataVisita" name="DataVisita"> </li> <li1> <label for="Observacao1">Observações</label> <textarea rows="6" id="Observacao1" name="Observacao1" placeholder="Digite a sua observação"></textarea> </li1> <li style="float: right"> <button type="button" class="btn btn-danger btn6" data-dismiss="modal">Cancelar</button> <button type="button" class="btn btn-success" onclick="inserir_registo6()">Gravar</button> </li> </ul> </form> </div> </div> </div>

问题是，当我打开一个 div 并打开另一个 div 时，它并没有隐藏前一个，而是在已经打开的那个下方打开。

我想打开第二个 div 来隐藏打开的那个。

问题出在js中，但我不建议把我想要工作的那部分放在一起

Answer 1

这是一个可能的解决方案：

function Mudarestado(el) {
        var display = document.getElementById(el).style.display;
        if(display == "none"){
            document.getElementById(el).style.display = 'block';
            document.getElementById(el).classList.add("active");
            document.getElementByClassName("active").style.display = 'none';
            document.getElementByClassName("active").classList.remove("active");
}else{
            document.getElementById(el).style.display = 'none';
            document.getElementByClassName(el).classList.remove("active");
}
    }