Question

我实际上是在Cordova为学校项目制作应用程序。我使用jQuery来隐藏和显示代码的一部分，包括问题和答案。问题是，当jQuery隐藏并显示问题时，屏幕顶部和显示的文本之间会出现空白。

以下是应用程序在回答所有问题后显示的内容（法语）：

我尝试使用$('#numero').hide(); / $('#numero').show();和$('#numero').css({"display":"none"}); / $('#numero').css({"display":"inline"})，空白区域仍然可见。

这是我的实际js代码：

var bluedata = [];
var numu = 0;
var numd = 0;
var hour = 0;

function sendData() {
  console.log("Sending...");
  bluetoothSerial.write(bluedata);
}

document.getElementById('btn-add').onclick = function() {
  $('#numeroplus').css({"display":"inline"});
  $('#numero1').css({"display":"inline"});
  $('#numero2').css({"display":"inline"});
  $('#btn-add').css({"display":"none"});
};
document.getElementById('btn-suivant').onclick = function() {
  numu = document.getElementById('numero').value;
  numd = document.getElementById('numeroplus').value;
  $('#numeroplus').css({"display":"none"});
  $('#numero').css({"display":"none"});
  $('#numero1').css({"display":"none"});
  $('#numero2').css({"display":"none"});
  $('#numerotel').css({"display":"none"});
  $('#frequencesms').css({"display":"inline"});
  $('#freqhour').css({"display":"inline"});
  $('#btn-add').css({"display":"none"});
  $('#btn-suivant').css({"display":"none"});
  $('#btn-suivant1').css({"display":"inline"});
  bluedata.push(numu);

  if (numd.length !== 0) {
    bluedata.push(numd);
  }
};
document.getElementById('btn-suivant1').onclick = function() {
  $('#frequencesms').hide();
  $('#freqhour').hide();
  hour = document.getElementById('freqhour').value;
  bluedata.push(hour);
  console.log(bluedata);
  $('#btn-suivant1').hide();
  $('#afterconf').show();
  sendData();
};

这是我的HTML代码（我使用Materialize制作类似Android的应用程序）：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <script type="text/javascript" src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bower_components/materialize/dist/css/materialize.css">
    <script type="text/javascript" src="css/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="css/bower_components/materialize/dist/js/materialize.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="icon" href="favicon.ico" />
    <title>La Piscine de la SIN</title>
</head>
<body>
<nav>
  <div class="nav-wrapper">
    <a class="brand-logo center">La Piscine</a>
  </div>
</nav>
 <div class="container">
<form class="col s12">
<div class="row">
<div class="input-field">
  <input placeholder="Premier numéro" id="numero" type="tel" pattern="^\d{2}-\d{2}-\d{2}-\d{2}-\d{2}$"><br/>
  <br/>
  <input placeholder="Deuxième numéro" id="numeroplus" style="display: none" type="tel" pattern="^\d{2}-\d{2}-\d{2}-\d{2}-\d{2}$"><br/>
  <br/><a id="btn-add">Ajouter un numéro de téléphone supplémentaire</a><br/>
    </div>
    </div>
    </form>
    </div>
  <br/><button type="button" id="btn-suivant" class="btn btn-suivant btn-lg btn-primary">Suivant</button>
  </div><div class="container">
<form class="col s12">
<div class="row">
<div class="input-field">
    <p id="frequencesms" style="display: none; text-align: center">À quelle heure voulez-vous recevoir un SMS sur l'état actuel de la piscine ?</p>
    <input id="freqhour" style="display: none" type="time"><br/>
    </div>
    </div>
    </form>
    </div>
    <br/><button type="button" id="btn-suivant1" style="display: none" class="btn btn-suivant btn-lg btn-primary">Suivant</button>
  </div><div id="afterconf" style="display:none">
    <h5>Félicitations, votre système d'alertes est maintenant configuré !</h5>
    <p>Vous communiquerez désormais avec le système en envoyant un SMS au numéro qui vient de vous contacter.</p>

    <h5>Liste des commandes pouvant être envoyées :</h5>
      <p>HELP<br/>TEMPERATURE<br/>EAU<br/>CHLORE</p>
  </div>
</div>
    <script type="text/javascript" src="js/mrtino.js"></script>
</body>

任何帮助都将不胜感激。

这是一个JSFiddle：https://jsfiddle.net/o6sx8nuc/

Answer 1

我想我已经解决了你的问题！

您应用中的空白区域是由类＆＃34;容器＆＃34;的空div引起的。我在此Fiddle

的第37行（在JavaScript部分内）添加了我的解决方案

我添加的代码是：

$('.container').hide();

使用display：none仍会产生空白

1 个答案: