如何隐藏元素，然后显示他们当DIV持有他们点击

问题描述：

这是很难解释没有你看到它，所以我建议你看看我张贴的JSFiddle。所以基本上当某个div被点击时，它向下展开以显示一些输入和按钮，但是我遇到的问题是当文档加载输入并且按钮可见时，它们应该只在它们所在的DIV展开时出现揭示它们。我已经尝试过以各种方式使用.hide（），并且无法弄清楚如何解决它。如何隐藏元素，然后显示他们当DIV持有他们点击

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; 
}

到你的CSS最初隐藏它们。然后更改

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

到

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

Example

很好的解决方案非常感谢！ – Joshua

答

为了解决这个问题，下.box的溢出添加到您的CSS：

.box { ... overflow:hidden; }

不过，现在的 “溢出”你的.box将被隐藏。尽管你可能需要更多地混淆CSS才能让它看起来像你想要的样子。祝你好运！

更新：这里有一个小提琴例如：https://jsfiddle.net/doercreator/v8u2q8re/2/

如何隐藏元素，然后显示他们当DIV持有他们点击

相关推荐