如何隐藏元素，然后在单击持有它们的 DIV 时显示它们答案

【问题标题】：How to hide elements, then reveal them when the DIV holding them gets clicked如何隐藏元素，然后在单击持有它们的 DIV 时显示它们
【发布时间】：2016-08-23 19:48:47
【问题描述】：

如果你没有看到它，这有点难以解释，所以我建议你看看我发布的 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 从帖子中删除，因为我认为这对我遇到的问题无关紧要。

【问题讨论】：

标签： javascript jquery html animation jquery-animate

【解决方案1】：

添加

.inputAreas {
  display: none;
}

到您的 css 以最初隐藏它们。然后改变

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

到

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

Example

【讨论】：

【解决方案2】：

要解决此问题，请在 .box 下的 CSS 中添加溢出：

.box { ... overflow:hidden; }

现在任何“溢出”您的 .box 的内容都将被隐藏。尽管您可能需要更多地使用 css 才能使其看起来像您想要的那样。祝你好运！

更新：这是一个小提琴示例：https://jsfiddle.net/doercreator/v8u2q8re/2/

【讨论】：