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("Y-m-d");?>">
      </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("Y-m-d");?>">
      </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，而是在已经打开的那个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");
}
    }

将打开一个div关闭上一个

1 个答案: