如何隱藏元素，然後顯示他們當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出來的崗位，因爲我不認爲它很重要的，我有這個問題。

來源

2016-08-23 Joshua

添加

.inputAreas { 
    display: none; 
}

到你的CSS最初隱藏它們。然後更改

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

到

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

Example

來源

2016-08-23 19:53:30 empiric

很好的解決方案非常感謝！ – Joshua

爲了解決這個問題，下.box的溢出添加到您的CSS：

.box { ... overflow:hidden; }

不過，現在的「溢出」你的.box將被隱藏。儘管你可能需要更多地混淆CSS才能讓它看起來像你想要的樣子。祝你好運！

更新：這裏有一個小提琴例如：https://jsfiddle.net/doercreator/v8u2q8re/2/

來源

2016-08-23 19:54:53 gumraven

如何隱藏元素，然後顯示他們當DIV持有他們點擊

回答

相關問題