使用onclick addClass獲取div

Question

我嘗試執行添加了展示類的onclick事件，但是，當單擊「創建新目標」時，我無法讓我的new-goal-container顯示。

我不希望這是一個切換，只是一個添加類。正如我的代碼顯示的，我試圖讓這個在css中快速淡出。有沒有更好的方法來解決這個問題，因爲現在即使沒有顯示div仍然佔用空間，當容器不可見時，我希望它看起來好像不存在。

$("#new-goal-button").click(function() { 
 
    $("#new-goal-container").addClass("show"); 
 
});

#new-goal-container { 
 
    -webkit-opacity: 0; 
 
    opacity: 0; 
 
    margin-top: 30px; 
 
    border: 1px solid black; 
 
    height: 500px; 
 
    width: 400px; 
 
    padding: 10px; 
 
} 
 
.show { 
 
    -webkit-opacity: 1; 
 
    opacity: 1; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="new-goal-button">Create new goal</div> 
 
<div id="new-goal-container"> 
 
    <input type="text" placeholder="Goal Title"> 
 
    <textarea placeholder="Goal Description"> 
 
</div>

Answer 1

問題是由於一個到id選擇比一個class選擇更具體。因此，opacity: 0優先於opacity: 1。將id和class選擇器一起添加到一起，以使它們比單獨的原始id選擇器更高的特異性。

另外請注意，您的textarea元素需要關閉標籤，該transition規則應該理想地對元素的基礎規則，只適用於opacity規則終於不再需要-webkit-供應商名稱。

$("#new-goal-button").click(function() { 
 
    $("#new-goal-container").addClass("show"); 
 
});

#new-goal-container { 
 
    opacity: 0; 
 
    margin-top: 30px; 
 
    border: 1px solid black; 
 
    height: 500px; 
 
    width: 400px; 
 
    padding: 10px; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
#new-goal-container.show { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="new-goal-button">Create new goal</div> 
 
<div id="new-goal-container"> 
 
    <input type="text" placeholder="Goal Title"> 
 
    <textarea placeholder="Goal Description"></textarea> 
 
</div>

這裏的工作示例的一個的jsfiddle也爲SO片段似乎在一瞬間被打破：

Working example