如何隐藏元素，然后在保存它们的DIV被单击时显示它们

How to hide elements, then reveal them when the DIV holding them gets clicked

本文关键字：DIV 显示 单击 保存 何隐藏 隐藏 然后 元素      更新时间：2023-09-26

如果你没有看到它，这有点难以解释，所以我建议你看看我发布的JSFiddle。当某个div被点击时它会展开显示一些输入和按钮，但我遇到的问题是当文档加载时输入和按钮是可见的，它们应该只在div展开显示时才会出现。我已经尝试过使用。hide()在各种可能的方式，不知道如何解决它。

https://jsfiddle.net/v8u2q8re/ 

<div>
  <div class='box' id='emailVer'>
    <h2 id='payText'>PAYMENT</h2>
  </div>
  <div class='box' id='accCust'>
    <h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
  </div>
  <div class='box' id='pay'>
    <h2 id='evText'>EMAIL VERIFICATION</h2>
    <div id='inputArea1' class='inputAreas'>
      <input id='email' class='evInput'>
      <input id='comf' class='evInput'>
      <button id='sndCde' class='evBut'>Send Code</button>
      <button id='comfBut' class='evBut'>Comfirm</button>
    </div>
  </div>
</div>

JS: 

var main = function(){
  $('.box').click(function() {
    var el = $(this); 
    if (!el.hasClass('selected')) {
      el.animate({
      "height": "300px"
    }, 200)
      el.addClass("selected");
      $('#inputAreas').show();
    } else {
      el.animate({
      "height": "85px"
    }, 200);
      $('#inputAreas').hide();
      el.removeClass("selected");
    }
  }
)}
$(document).ready(main);

我决定离开css的帖子，因为我不认为它的问题，我有。

添加

.inputAreas {
  display: none;
}

设置为初始隐藏。然后修改

$('#inputAreas').show();


el.find('.inputAreas').show();
示例

要解决这个问题，可以在。box下添加overflow:

.box { ... overflow:hidden; }

现在任何"溢出"你的。box将被隐藏。尽管您可能需要对css进行更多的修改，以使其看起来像您想要的那样。好运！

更新:下面是一个简单的例子:https://jsfiddle.net/doercreator/v8u2q8re/2/

相关文章：